/* ==========================================================================
   Avanzo Calendar — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, radius and elevation.
   Nothing below this layer may hard-code a colour or a pixel size.

   Tokens are named SEMANTICALLY (--surface, --text-primary) rather than
   literally (--white, --grey-800). That is deliberate: it means a dark theme
   is a block of overrides in this file and nothing else has to change.
   See docs/adr/0001-no-build-frontend.md.

   Contrast: every foreground/background pair defined here has been checked
   against WCAG 2.1 AA (4.5:1 for text). Ratios are noted inline. Do not
   introduce a new colour pair without checking it.
   ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     --brand is the fill colour (white text on it = 4.51:1, AA pass).
     --brand-text is a darker cut for brand-coloured TEXT on light surfaces
     (5.37:1) because --brand as text is only 4.51:1 and too tight to trust
     at small sizes. Use the right one for the job. */
  --brand:              #1a73e8;
  --brand-hover:        #1557b0;
  --brand-active:       #10428a;
  --brand-text:         #1967d2;
  --brand-subtle:       #e8f0fe;
  --brand-subtle-hover: #d2e3fc;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --surface:            #ffffff;
  --surface-raised:     #ffffff;
  --surface-sunken:     #f6f8fc;
  --surface-hover:      #f1f3f4;
  --surface-active:     #e8eaed;
  --scrim:              rgb(32 33 36 / 50%);

  /* ── Text ───────────────────────────────────────────────────────────────
     on --surface: primary 16.1:1 · secondary 11.6:1 · muted 7.0:1 */
  --text-primary:       #202124;
  --text-secondary:     #3c4043;
  --text-muted:         #5f6368;
  --text-inverse:       #ffffff;

  /* ── Borders ────────────────────────────────────────────────────────────
     --border-strong is for form controls, which need a visible edge to be
     recognisable as inputs; --border is for structural dividers. */
  --border:             #dadce0;
  --border-strong:      #9aa0a6;

  /* ── Status ─────────────────────────────────────────────────────────────
     Each status carries fg (text, AA-checked), bg (chip fill) and accent
     (dot / left border). Status is NEVER communicated by colour alone —
     every status chip also carries an icon and a text label. */
  --status-pending-fg:       #a05e00; /* 5.13:1 on white */
  --status-pending-fg-hover: #7d4a00; /* darker still, so white-on-it only improves */
  --status-pending-bg:       #fef7e0;
  --status-pending-accent:   #f9ab00;

  --status-approved-fg:       #137333; /* 5.95:1 on white */
  --status-approved-fg-hover: #0d5626;
  --status-approved-bg:       #e6f4ea;
  --status-approved-accent:   #34a853;

  --status-rejected-fg:       #c5221f; /* 5.80:1 on white */
  --status-rejected-fg-hover: #a51b18;
  --status-rejected-bg:       #fce8e6;
  --status-rejected-accent:   #ea4335;

  --status-cancelled-fg:     #5f6368; /* 7.00:1 on white */
  --status-cancelled-bg:     #f1f3f4;
  --status-cancelled-accent: #80868b;

  /* ── Type scale ─────────────────────────────────────────────────────────
     Replaces the 12 ad-hoc sizes the templates used to carry.
     --fs-xs (12px) is the FLOOR. Nothing smaller ships; the old 9/10/11px
     labels are unreadable and fail every legibility guideline. Small labels
     use --fs-xs with uppercase + letter-spacing instead of shrinking. */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.375rem;   /* 22px */
  --fs-2xl:   1.75rem;    /* 28px */
  --fs-3xl:   2.25rem;    /* 36px */

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

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

  --font-sans:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Google Sans', 'Roboto', system-ui, sans-serif;

  /* ── Space scale (4px base) ─────────────────────────────────────────── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 999px;

  /* ── Elevation ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
  --shadow-md: 0 1px 3px rgb(60 64 67 / 30%), 0 4px 8px 3px rgb(60 64 67 / 15%);
  --shadow-lg: 0 4px 4px rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    120ms;
  --dur-normal:  200ms;
  --dur-slow:    320ms;

  /* ── Layout ─────────────────────────────────────────────────────────────
     --header-h and --bottomnav-h are read by the shell to reserve space, so
     content is never hidden behind a fixed bar. --tap-min is the WCAG 2.1 AA
     minimum touch target and must not be lowered. */
  --header-h:     56px;
  --sidebar-w:    256px;
  --bottomnav-h:  64px;
  --content-max:  1280px;
  --toast-max-w:  420px;
  --tap-min:      44px;

  /* ── Focus ──────────────────────────────────────────────────────────────
     One ring, used everywhere, never removed. The old stylesheet had four
     :focus rules across 5,241 lines, which left keyboard users with no
     visible position at all. */
  --focus-ring:        var(--brand);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  --z-sidebar:   50;
  --z-bottomnav: 60;
  --z-header:    70;
  --z-drawer:    80;
  --z-popover:   90;
  --z-toast:     100;
}

@media (min-width: 768px) {
  :root { --header-h: 64px; }
}

/* ── Dark theme ───────────────────────────────────────────────────────────
   Deliberately NOT shipped yet (decided during the redesign review): the
   token layer is structured so it can be, but light is the only theme that
   has been QA'd. To enable, uncomment and verify every status pair for
   contrast against the dark surfaces — the ratios above are for white only.

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #202124;
    --surface-sunken: #171717;
    ...
  }
}
   ────────────────────────────────────────────────────────────────────── */