/**
 * Design tokens — the single source of truth for colour, radius, type and
 * elevation in mia-theme.
 *
 * The token *architecture* is shadcn/ui's: semantic role names (surface,
 * foreground, muted, primary, border, ring, radius) rather than literal
 * colour names, so a value can change in one place. shadcn/ui itself cannot
 * be installed in this theme -- it ships Tailwind-class TSX components and
 * this theme has no npm, no build step and no Tailwind (see AGENTS.md §9.1).
 * What is adopted is the naming model and the component anatomy; the
 * implementation is plain CSS custom properties.
 *
 * Contrast ratios in the comments are measured against the surface each
 * token is intended for. Anything used for text meets WCAG 2.2 AA (4.5:1);
 * AGENTS.md §9 targets 7:1 for body copy.
 *
 * Templates consume these with var(). Values that JavaScript computes per
 * state (selected tier, calendar cell) mirror the same palette in each
 * bundle's `TOKENS` map -- keep the two in step.
 */
:root {
  /* --- surfaces ------------------------------------------------------- */
  --mia-bg:              #F6F7FA;  /* app background */
  --mia-card:            #FFFFFF;  /* raised surface */
  --mia-field:           #F7F9FC;  /* input / control well */
  --mia-shell:           #E9EDF4;  /* letterbox behind the mobile column */
  --mia-surface-dark:    #1B2437;  /* footer, sticky mobile total bar */

  /* --- foreground ----------------------------------------------------- */
  --mia-fg:              #1B2437;  /* 15.51:1 on card — body and headings */
  --mia-fg-muted:        #49536B;  /*  7.68:1 on card — secondary copy */
  --mia-fg-subtle:       #5A6478;  /*  5.95:1 on card — labels, metadata */
  --mia-fg-disabled:     #C2C8D4;  /*  1.68:1 — disabled only, never text */
  --mia-fg-on-dark:      #B9C2D6;  /*  8.68:1 on surface-dark — muted copy there */

  /* --- brand ---------------------------------------------------------- */
  --mia-primary:         #2E4699;  /*  8.56:1 on card */
  --mia-primary-hover:   #253A80;
  --mia-primary-fg:      #FFFFFF;  /*  8.56:1 on primary */
  --mia-primary-soft:    #EDF1FA;  /* selected / accent fill */
  --mia-primary-border:  #C9D4EE;
  --mia-primary-edge:    #D9E1F2;  /* card outline on commercial surfaces */
  --mia-primary-muted:   #B9C2D6;  /* disabled primary */

  /* --- lines ---------------------------------------------------------- */
  --mia-border:          #E4E8F0;
  --mia-border-subtle:   #EDF0F6;
  --mia-input:           #CBD3E4;
  --mia-ring:            #2E4699;  /* focus ring */

  /* --- status --------------------------------------------------------- */
  --mia-success:         #0E6B41;  /*  6.57:1 on card */
  --mia-success-strong:  #0E5A38;  /*  7.38:1 on success-bg */
  --mia-success-bg:      #E8F5EE;
  --mia-success-border:  #BFE3CF;
  --mia-success-dot:     #1FA855;  /* decorative */
  --mia-danger:          #C2402A;  /*  5.17:1 on card */
  --mia-warning:         #8A6B00;
  --mia-warning-dot:     #D89A00;  /* decorative */
  --mia-star:            #E8A013;  /* review star colour (decorative) */

  /* --- dark-surface lines ----------------------------------------------- */
  --mia-border-dark:     #2A3550;  /* divider on --mia-surface-dark */

  /* --- radius --------------------------------------------------------- */
  --mia-radius-sm:       10px;
  --mia-radius:          12px;
  --mia-radius-md:       14px;
  --mia-radius-lg:       18px;
  --mia-radius-xl:       20px;
  --mia-radius-full:     999px;

  /* --- type ----------------------------------------------------------- */
  --mia-font-display:    'Lexend', sans-serif;          /* UI, headings, numerals */
  --mia-font-body:       'Atkinson Hyperlegible', sans-serif;
  /* Step scale. 16px is the project floor (AGENTS.md §9); there is no
     smaller step on purpose, so no component can opt below it. */
  --mia-text-label:      16px;   /* micro-labels, metadata */
  --mia-text-body:       18px;   /* body copy */
  --mia-text-lg:         20px;
  --mia-text-xl:         22px;   /* price inside a choice tile */
  --mia-text-2xl:        26px;   /* running total */
  --mia-text-3xl:        32px;

  /* --- spacing -------------------------------------------------------- */
  --mia-space-1:         4px;
  --mia-space-2:         8px;
  --mia-space-3:         12px;
  --mia-space-4:         16px;
  --mia-space-5:         20px;
  --mia-space-6:         24px;

  /* --- controls -------------------------------------------------------- */
  --mia-target:          48px;   /* minimum tap target, AGENTS.md §9 */
  --mia-control-h:       58px;   /* primary action height */

  /* --- elevation ------------------------------------------------------ */
  --mia-shadow-card:     0 1px 2px rgba(27, 36, 55, 0.04);
  --mia-shadow-raised:   0 4px 14px rgba(46, 70, 153, 0.28);
  --mia-shadow-pop:      0 16px 40px rgba(27, 36, 55, 0.18);
  --mia-shadow-sticky:   0 -10px 18px -14px rgba(27, 36, 55, 0.22);
}