/*
  tokens.css — single DESIGN.md token source for myDM.
  Promoted from .planning/phases/17-design-pass/17-mockups/tokens.css (D-approved
  in 17-02) plus two production-only additions:

    1. Self-hosted @font-face rules — no network font call, offline PWA safe.
    2. Back-compat aliases for theme.css's --dm-*, --bg-*, --text-* (etc.) names, so
       the nine office stylesheets that still consume theme.css (dashboard.css,
       approval.css, campaigns.css, capture_form.css, form_builder.css,
       live_map.css, payroll.css, province-map.css, roster.css) keep their
       current colours until 17-06 supersedes theme.css directly. CSS custom
       properties fail silently — an unresolved var() renders as nothing, not
       an error — so this file is the load-bearing bridge, not decoration.

  Colour discipline (DESIGN.md): green and orange are hairlines, ticks, dots,
  strokes, focus rings and single small CTAs — NEVER fills or large blocks.
  Dark text (--color-navy) on any green/orange element. White text on navy only.
*/

/* ---------------------------------------------------------------- */
/* Self-hosted fonts — DM Sans (headings) / Figtree (body)           */
/* latin + latin-ext combined subset: keeps SA names (á é ñ etc.)    */
/* ---------------------------------------------------------------- */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/dm-sans-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/figtree-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-600.woff2') format('woff2');
}

:root {
  /* ---------------------------------------------------------------- */
  /* Colour — verbatim from DESIGN.md                                  */
  /* ---------------------------------------------------------------- */
  --color-cobalt: #2B3A67;       /* primary dark / brand navy */
  --color-navy: #0e1020;         /* deep page dark, and dark text-on-accent */
  --color-cobalt-dark: #1e2148;  /* navy pressed/hover */
  --color-green: #7AB648;        /* primary accent — the retired pre-2026-09-17 green is banned here */
  --color-orange: #FF6600;       /* secondary accent */
  --color-orange-dark: #E55A00;  /* orange pressed */
  --color-orange-light: #FF8533; /* orange light */

  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-600: #475569;
  --slate-900: #0F172A;

  --color-white: #FFFFFF;
  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-warning: #92400e;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fcd34d;
  /* Status, completed for dark mode (17.4 B8): each state is a text colour,
     a tint behind it and a border. The *-fill colours are solid, with white
     text on them (buttons, booked/available cells): the same in both themes. */
  --color-danger-fill: #b91c1c;
  --color-success-fill: #15803d;
  --color-info-fill: #1d4ed8;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;

  /* ---------------------------------------------------------------- */
  /* Roles (17.4 B8). Stylesheets colour things by what they ARE, not  */
  /* by a palette step, so the dark palette below swaps one set of     */
  /* names. Light values are the exact steps the shell used before.    */
  /* ---------------------------------------------------------------- */
  --surface-page: var(--slate-100);   /* behind everything */
  --surface: var(--color-white);      /* cards, topbar, sidebar, inputs, menus */
  --surface-muted: var(--slate-50);   /* hover rows, card footers */
  --surface-sunken: var(--slate-100); /* tracks, wells */
  --surface-brand: #EEF0F8;           /* pale navy tint: selected / highlighted rows */
  --line: var(--slate-200);           /* borders, dividers */
  --line-soft: var(--slate-100);
  --text-strong: var(--slate-900);    /* body text, headings */
  --text-soft: var(--slate-600);      /* secondary text */
  --text-faint: #5B6B80;             /* hints, placeholders, meta: 4.5:1+ on every light surface (DESIGN: AA). slate-400 is for icons and lines, never text */
  --text-brand: var(--color-cobalt);  /* navy as text: titles, links, active nav */
  --fill-brand: var(--color-cobalt);  /* navy as a fill: primary buttons, avatar, active tab */
  --fill-brand-hover: var(--color-cobalt-dark);
  --fill-deep: var(--color-navy);      /* deepest navy fills, headers, backdrops: same in both themes */
  --fill-neutral: var(--slate-600);   /* grey fill with white text (neutral badges): same in both themes */
  --fill-branch-tag: #5b46a0;          /* purple tag with the branch holder's first name on the office Today page (D, 1 Nov): white text, same in both themes */
  --logo-halo: none;                   /* see the dark block */
  --noticeboard-cork: #c4a265;        /* branch noticeboard cork: same in both themes */
  --on-brand: var(--color-white);     /* text on a navy fill */
  --on-accent: var(--color-navy);     /* text on a green or orange fill (DESIGN: dark text on accents) */
  --green-ink: #4C712D;              /* green as text: links, badges, icons. 5:1+ on every light surface (DESIGN: AA); #7AB648 itself is 2.4:1 on white, an accent never text */
  --green-on-brand: var(--color-green); /* green text on a --fill-brand navy (live map header): 4.5:1 */
  --orange-ink: #B93D00;             /* orange as text and icons: 5:1+ on every light surface (DESIGN: AA); #FF6600 is 2.9:1 on white: borders, fills, never text */
  /* Chart.js series (static/js/charts.js reads --chart-<name>): 3:1+ on
     --surface in both themes (WCAG non-text), so a bar never sinks into its card. */
  --chart-navy: #2B3A67;
  --chart-green: #5e9a34;
  --chart-orange: #E55A00;
  --chart-amber: #d97706;
  --chart-navy-light: #7B8BD0;          /* 3.26:1 on white; tells 'paid via branch' from navy labour and orange transport (D, 15 Oct) */
  --chart-red: #b91c1c;
  --chart-grid: rgba(15, 23, 42, 0.08);

  /* ---------------------------------------------------------------- */
  /* Type — DM Sans (headings, 700/800, -0.02em) / Figtree (body)      */
  /* ---------------------------------------------------------------- */
  --font-heading: 'DM Sans', -apple-system, sans-serif;
  --font-body: 'Figtree', -apple-system, sans-serif;

  --tracking-heading: -0.02em;

  /* Named scale shared by mockups and templates — one vocabulary. */
  --text-eyebrow: 12px;
  --text-small: 13px;
  --text-body: 16px;
  --text-h2: clamp(20px, 4vw, 24px);
  --text-h1: clamp(26px, 6vw, 34px);
  --text-hero: clamp(36px, 10vw, 56px);

  --leading-body: 1.6;
  --leading-heading: 1.15;

  /* ---------------------------------------------------------------- */
  /* Spacing scale                                                     */
  /* ---------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------------------------------------------------------------- */
  /* Radius scale                                                      */
  /* ---------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------- */
  /* Shadow scale — restrained. DESIGN.md forbids drop-shadow pile-ups */
  /* and nested cards. One elevation for a resting card, one for a     */
  /* pressed/active sheet. Nothing stacks.                             */
  /* ---------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(14, 16, 32, 0.06), 0 1px 3px rgba(14, 16, 32, 0.08);
  --shadow-sheet: 0 -4px 24px rgba(14, 16, 32, 0.16);

  /* ---------------------------------------------------------------- */
  /* Motion tokens — transform/opacity only, cheap on low-end Android */
  /* ---------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Touch target floor per DESIGN.md / WCAG */
  --tap-target: 48px;

  /* ---------------------------------------------------------------- */
  /* Back-compat aliases — theme.css variable names, mapped onto the   */
  /* canon tokens above. Every name here was found by grepping        */
  /* `var(--` across static/css/*.css (2026-09-20). Do not remove an   */
  /* alias until the stylesheet consuming it is repointed at the new   */
  /* names directly — theme.css itself is superseded in 17-06.         */
  /* ---------------------------------------------------------------- */

  /* DM navy/green palette (dashboard.css, approval.css, campaigns.css,
     live_map.css, payroll.css, province-map.css, roster.css) */
  --dm-navy: var(--color-cobalt);
  --dm-navy-light: #3a4080;
  --dm-navy-dark: var(--color-cobalt-dark);
  --dm-navy-deep: var(--color-navy);
  --dm-green: var(--color-green);
  --dm-green-dim: #5e9a34;
  --dm-green-light: #8ec45e;
  /* No stylesheet in static/css/*.css declares its own copy of the pre-2026-09-17
     retired green — nothing to alias onto var(--color-green) here. The old
     green hex is banned outright per DESIGN.md, not remapped. */
  --dm-orange: var(--color-orange);
  --dm-orange-light: var(--color-orange-light);
  --dm-orange-border: var(--color-orange-dark);
  --dm-surface: var(--surface-muted);
  --dm-border: var(--line);
  --province-default-fill: var(--line);

  /* Backgrounds */
  --bg-primary: var(--surface-muted);
  --bg-secondary: var(--surface);
  --bg-card: var(--surface);

  /* Text */
  --text-primary: var(--text-strong);
  --text-secondary: var(--text-soft);
  --text-muted: var(--text-faint);

  /* Borders */
  --border-color: var(--line);
  --border-color-light: var(--line-soft);

  /* Status colours — theme.css names (no DESIGN.md equivalent, kept literal).
     --color-warning is NOT aliased here: the approved mockup token set (17-02)
     already declares --color-warning: #92400e above for the new warning-badge
     pattern (dark text on tinted background). dashboard.css's flat amber
     (#f59e0b) dots/badges pick up that darker shade instead — a visible but
     non-breaking shift (still reads as amber/warning), documented in the
     17-03 SUMMARY rather than forking the token into two names. */
  --color-success: #15803d;          /* success as text (was #10b981, 2.5:1 on white); 5:1 like danger/warning's inks. Dark keeps its own */
  --color-error: #b91c1c;            /* error as text = the danger ink (was #ef4444, 3.8:1 on white). Dark keeps its own */
  --color-info: #1d4ed8;             /* info as text (was #3b82f6, 3.4:1 on white): 6:1+. Dark keeps its own */

  /* Shadows (theme.css scale — separate from --shadow-card/--shadow-sheet above) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Layout */
  --spacing-sidebar: 260px;
  --spacing-sidebar-collapsed: 64px;
  --spacing-topbar: 60px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Z-index layers */
  --z-sidebar: 100;
  --z-topbar: 200;
  --z-dropdown: 300;
}

/* ---------------------------------------------------------------- */
/* Dark (17.4 B8, D 29 Sep; surfaces +5% lightness, D 1 Oct): navy page, lighter navy cards, */
/* green and orange unchanged. On :root so every alias above that     */
/* reads a role (--bg-card: var(--surface)) picks the dark value up.  */
/* Only the roles change here, never a component. The only place a    */
/* stylesheet may say [data-theme="dark"] (core/tests/test_dark_mode).*/
/* ---------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #1c2046;
  --surface: #26295a;
  --surface-muted: #2e326a;
  --surface-sunken: #20244f;
  --surface-brand: #313878;
  --line: #3c4381;
  --line-soft: #31376e;
  --text-strong: #F1F5F9;
  --text-soft: #CBD5E1;
  --text-faint: #A3B1C6;            /* 4.9:1+ on every dark surface incl. --surface-brand (raised with the 1 Oct lift) */
  --text-brand: #B9C3F2;
  --fill-brand: #3a4080;               /* button fill: not lifted (white text on it and its counters stays AA) */
  --fill-brand-hover: #4a52a0;
  --on-brand: #FFFFFF;
  --green-ink: #A5D67F;
  --green-on-brand: #A5D67F;           /* dark --fill-brand is lighter: brand green drops to 3.9:1 */
  --orange-ink: #FF9A57;               /* 5:1+ on every dark surface (raised with the 1 Oct lift) */
  --chart-navy: #8FA0F0;               /* brand navy bars vanish on a navy card */
  --chart-green: #7AB648;
  --chart-orange: #FF6600;
  --chart-amber: #fbbf24;
  --chart-navy-light: #E2E7FF;
  --chart-red: #f87171;
  --chart-grid: rgba(241, 245, 249, 0.10);
  /* Client/brand logos keep their own colours; dark ink (Mountain Valley,
     Festive) would vanish on navy, so every logo gets a faint light edge. */
  --logo-halo: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));

  /* Status on navy: lighter text, see-through tints (--color-danger-fill stays). */
  --color-danger: #fca5a5;             /* 6:1+ even on its own tint over --surface-muted (#f87171 was 4.25) */
  --color-danger-bg: rgba(239, 68, 68, 0.16);
  --color-danger-border: rgba(248, 113, 113, 0.45);
  --color-error: #fca5a5;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(245, 158, 11, 0.16);
  --color-warning-border: rgba(251, 191, 36, 0.45);
  --color-success: #5ee0a0;           /* 5:1+ on its tint over every dark surface */
  --color-success-bg: rgba(16, 185, 129, 0.16);
  --color-success-border: rgba(52, 211, 153, 0.40);
  --color-info: #93c5fd;              /* 4.9:1+ on its tint over every dark surface */
  --color-info-bg: rgba(59, 130, 246, 0.16);
  --color-info-border: rgba(96, 165, 250, 0.45);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.50);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- */
/* {% icon %} (core/templatetags/icons.py). Sits on the text's      */
/* centre line inline beside a label; inside a flex row vertical-   */
/* align does nothing and flex-shrink keeps it from being squashed.  */
/* ---------------------------------------------------------------- */
.icon { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }

/* The green bar in the myDM mark (components/_mydm_mark.html). Here, not in a
   page stylesheet: the mark appears on office, promoter and sign-in pages,
   and every one of them loads tokens.css. */
.mydm-mark-accent { fill: var(--color-green); }