/* Direction 3 — "Front Desk". Tokens only (shared contract names).
   Warm linen neutrals (cream page, warm-white surfaces, warm greys), one
   forest-green accent that matches the Songline lark mark (favicon.svg).
   Every text/background pair is WCAG 2.2 AA in both themes (polish pass,
   20 Oct 2026). This file is identical in web/ds/ and site/ds/; a test
   (tests/test_ui_static.py) keeps the two copies in sync. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/bricolage-grotesque-500.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/bricolage-grotesque-600.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/bricolage-grotesque-700.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"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/figtree-700.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/dm-mono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Colour — light */
  --color-bg: #F7F4ED;
  --color-surface: #FFFDF9;
  --color-surface-sunken: #EFEBE1;
  --color-surface-raised: #FFFFFF;
  --color-border: #E3DED3;
  --color-border-strong: #8A857A;
  --color-text: #201D18;
  --color-text-muted: #534D43;
  --color-text-subtle: #6A6459;
  --color-accent: #1F6B4F;
  --color-accent-hover: #185840;
  --color-accent-text: #FFFFFF;
  --color-accent-subtle: #E2EFE5;
  --color-focus: #1F6B4F;
  --color-success: #2F6A1E;
  --color-success-subtle: #E6F0DB;
  --color-warning: #8A5300;
  --color-warning-subtle: #FBEFD9;
  --color-danger: #B3261E;
  --color-danger-subtle: #FBE7E2;
  --color-info: #1D5E8C;
  --color-info-subtle: #E2EDF5;
  --color-call-live: #1F6B4F;
  --color-call-ringing: #9A5200;
  --color-overlay: rgb(32 29 24 / 0.5);

  /* Type */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: 1.875rem;   /* 30 */
  --text-3xl: 2.375rem;   /* 38 */
  --text-4xl: 3.25rem;    /* 52 */
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;

  /* Space (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Shape, depth, motion, layout */
  --radius-sm: 6px;
  --radius-md: 8px;      /* controls */
  --radius-lg: 10px;     /* containers */
  --radius-full: 999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgb(48 40 24 / 0.06);
  --shadow-md: 0 4px 12px rgb(48 40 24 / 0.08), 0 1px 2px rgb(48 40 24 / 0.06);
  --shadow-lg: 0 18px 40px rgb(48 40 24 / 0.14), 0 2px 6px rgb(48 40 24 / 0.07);
  --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.15);
  --control-h-sm: 2rem;
  --control-h-md: 2.5rem;
  --control-h-lg: 3rem;
  --content-max: 72rem;
  --prose-max: 40rem;
  --sidebar-w: 14.5rem;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-toast: 200;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #171512;
    --color-surface: #1F1C18;
    --color-surface-sunken: #121009;
    --color-surface-raised: #272420;
    --color-border: #35312B;
    --color-border-strong: #7A746A;
    --color-text: #F0ECE4;
    --color-text-muted: #BAB3A7;
    --color-text-subtle: #958E82;
    --color-accent: #72D0A2;
    --color-accent-hover: #8EDCB5;
    --color-accent-text: #0C2118;
    --color-accent-subtle: #1D382B;
    --color-focus: #72D0A2;
    --color-success: #9BD27F;
    --color-success-subtle: #233319;
    --color-warning: #F0B65A;
    --color-warning-subtle: #3B2C14;
    --color-danger: #F59A8F;
    --color-danger-subtle: #3F201B;
    --color-info: #86BFE8;
    --color-info-subtle: #182E3F;
    --color-call-live: #72D0A2;
    --color-call-ringing: #F0B65A;
    --color-overlay: rgb(8 6 4 / 0.66);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #171512;
  --color-surface: #1F1C18;
  --color-surface-sunken: #121009;
  --color-surface-raised: #272420;
  --color-border: #35312B;
  --color-border-strong: #7A746A;
  --color-text: #F0ECE4;
  --color-text-muted: #BAB3A7;
  --color-text-subtle: #958E82;
  --color-accent: #72D0A2;
  --color-accent-hover: #8EDCB5;
  --color-accent-text: #0C2118;
  --color-accent-subtle: #1D382B;
  --color-focus: #72D0A2;
  --color-success: #9BD27F;
  --color-success-subtle: #233319;
  --color-warning: #F0B65A;
  --color-warning-subtle: #3B2C14;
  --color-danger: #F59A8F;
  --color-danger-subtle: #3F201B;
  --color-info: #86BFE8;
  --color-info-subtle: #182E3F;
  --color-call-live: #72D0A2;
  --color-call-ringing: #F0B65A;
  --color-overlay: rgb(8 6 4 / 0.66);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}