/* ==========================================================================
   ALTAIDE — TOKENS
   The only file you should need to edit to change the whole app.
   Load FIRST, before every other stylesheet.
   ========================================================================== */

:root {

  /* --- Type -------------------------------------------------------------- */
  --font-titles: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;

  --text-xs: 0.75rem;      /* 12px — uppercase eyebrows, chip text */
  --text-sm: 0.875rem;     /* 14px — captions, helper text */
  --text-base: 1rem;       /* 16px — body, inputs, buttons */
  --text-md: 1.0625rem;    /* 17px — list item titles */
  --text-lg: 1.1875rem;    /* 19px — card titles */
  --text-xl: 1.375rem;     /* 22px — section headings */
  --text-display: 1.6875rem; /* 27px — page titles */

  --leading-tight: 1.15;   /* titles */
  --leading-normal: 1.45;  /* body */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-title: -0.03em;
  --tracking-eyebrow: 0.06em;

  /* --- Ink ---------------------------------------------------------------
     Four steps, in order of loudness. --text-subtle is the floor: never
     put content a user must read below it (it is 4.6:1 on --surface). */
  --text-strong: #101828;  /* titles, numbers, anything decisive */
  --text-main: #39465A;    /* body copy, labels */
  --text-muted: #5A6779;   /* secondary lines, sublines */
  --text-subtle: #7A8798;  /* metadata, placeholders, disabled */
  --text-on-accent: #FFFFFF;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg: #F6F8FB;           /* app background */
  --surface: #FFFFFF;      /* cards, sheets, inputs */
  --surface-sunken: #F2F5F8; /* chips, icon wells, inactive segments */
  --border: #DCE2EA;       /* every 1px line in the app */
  --border-strong: #C9D2DD; /* radio and checkbox outlines */

  /* --- Accent ------------------------------------------------------------
     Coral 400 — the original app coral, back as the accent.

     It is a LIGHT colour, so the two roles cannot be the same value:
       --color-accent      is a FILL   — carries dark text, not white
       --text-on-accent    is what sits ON that fill
       --color-accent-ink  is accent TEXT on a white ground
     Those are the two knobs to turn while you settle the contrast. Nothing
     outside this block needs to change whichever values you land on. */

  --color-accent: #FF8A80;
  --color-accent-strong: #F2695E;  /* hover / pressed */
  /*--text-on-accent: #3D1F1B;       /* dark ink on the fill — 6.5:1 */
  --color-accent-ink: #B23B2E;     /* accent text on white — 4.9:1 */
  --color-accent-soft: #FFF0EE;    /* selected card fill, tinted rows */
  --color-accent-border: #FFD4CF;  /* border on soft fills */

  /* Wordmark only — do not use as a component background. */
  --brand-gradient: linear-gradient(135deg, #FF8C61 0%, #FF5C8D 100%);

  /* --- Status ------------------------------------------------------------
     Deepened so white text and small labels pass AA. */
  --color-success: #0F7A5A;
  --color-success-soft: #E8F5EF;
  --color-warning: #B25E00;
  --color-warning-soft: #FEF3E2;
  --color-danger: #C2362B;
  --color-danger-soft: #FCEDEB;
  --color-info: #2A5FA8;
  --color-info-soft: #EAF1FB;

  /* --- Radius ------------------------------------------------------------ */
  --radius-chip: 10px;     /* chips, tags, badges only */
  --radius-sm: 16px;       /* inputs, buttons, small cards */
  --radius-md: 22px;       /* cards, sheets, modals */
  --radius-pill: 999px;

  /* --- Elevation ---------------------------------------------------------
     Two. Cards use --shadow-sm with a border; only floating things
     (sheets, dropdowns, side menu) get --shadow-md. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 12px 32px -14px rgba(16, 24, 40, 0.22);

  /* --- Space ------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Débordement de 100vh sous la barre de gestes Android. */
  --viewport-overflow: 46px;
	
  /* --- Layout ------------------------------------------------------------ */
  --page-gutter: 20px;
  --header-height: 60px;
  --bottom-nav-height: 74px;
  --safe-bottom: min(env(safe-area-inset-bottom, 0px), 0px);
  --safe-top: 0px;

  /* Hauteur réelle occupée par la nav. Tout ce qui doit la dégager
     lit cette variable, jamais le calcul à la main. */
  --nav-total: calc(var(--bottom-nav-height) + var(--safe-bottom));

  /* --- Motion ------------------------------------------------------------ */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Controls ---------------------------------------------------------- */
  --control-height: 52px;  /* buttons and inputs share one height */
  --tap-min: 44px;         /* nothing interactive smaller than this */
}

/* Aliases so existing rules keep working while you migrate.
   Delete this block once nothing references the old names. */
:root {
  --accent: var(--color-accent);
  --primary: var(--color-accent);   /* was the gradient — now flat, by design */
  --text-white: var(--text-on-accent);
  --green: var(--color-success);
  --warning: var(--color-warning);
  --radius: var(--radius-md);
  --shadow: var(--shadow-sm);
}