/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* 
* A bit about breakpoints:
* Phones are the default style because this is a mobile app first.
* Tablets use min-width: 768px;
* Desktops use min-width: 1024px;
*/

:root {
  /* Spacing */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);
  --padding: 12px;
  --padding-double: calc(var(--padding) * 2);
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;

  --lch-red-medium: 66.95% 0.182 22.99;
  --lch-blue-extra-light: 94.01% 0.007 233.64;
  --lch-green-dark: 49.92% 0.081 197.10;
  --lch-green-light: 0.7 0.1 191;
  --lch-orange-medium: 0.6783 0.1559 35.18;

  /* Colors */
  --color-red-medium: oklch(var(--lch-red-medium));
  --color-blue-extra-light: oklch(var(--lch-blue-extra-light));
  --color-green-dark: oklch(var(--lch-green-dark));
  --color-green-light: oklch(var(--lch-green-light));
  --color-orange-medium: oklch(var(--lch-orange-medium));

  /*Text sizes*/
  --font-xx-small: 0.55rem;
  --font-x-small: 0.75rem;
  --font-small: 0.85rem;
  --font-medium: 1.1rem;
  --font-large: 1.5rem;
  --font-x-large: 2.0rem;
  --font-xx-large: 2.5rem;
  --font-xxx-large: 4rem;

  /* Fonts */
  --font-sans: "Red Hat Text", system-ui, sans-serif;
  --font-display: "Red Hat Display", system-ui, sans-serif;

  /* Weights */
  --font-weight-black: 900;
  --font-weight-extra-bold: 800;
  --font-weight-bold: 700;
  --font-weight-semi-bold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;

}