/* Direction 3 — "Front Desk". Tokens only (shared contract names).
   Cool stone neutrals, white surfaces, one forest-green accent.
   All text pairs checked for WCAG 2.2 AA in both themes (see index.html). */

@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: #F1F2EF;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #E9EBE7;
  --color-surface-raised: #FFFFFF;
  --color-border: #D9DCD7;
  --color-border-strong: #878D88;
  --color-text: #1B201D;
  --color-text-muted: #4C534E;
  --color-text-subtle: #646B66;
  --color-accent: #1F6B4F;
  --color-accent-hover: #18573F;
  --color-accent-text: #FFFFFF;
  --color-accent-subtle: #E2EFE8;
  --color-focus: #1F6B4F;
  --color-success: #2F6A1E;
  --color-success-subtle: #E6F0DF;
  --color-warning: #8A5300;
  --color-warning-subtle: #FBEFD9;
  --color-danger: #B3261E;
  --color-danger-subtle: #FBE6E3;
  --color-info: #1D5E8C;
  --color-info-subtle: #E1EDF6;
  --color-call-live: #1F6B4F;
  --color-call-ringing: #9A5200;
  --color-overlay: rgb(27 32 29 / 0.48);

  /* 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(27 32 29 / 0.06);
  --shadow-md: 0 4px 12px rgb(27 32 29 / 0.08), 0 1px 2px rgb(27 32 29 / 0.06);
  --shadow-lg: 0 18px 40px rgb(27 32 29 / 0.16), 0 2px 6px rgb(27 32 29 / 0.08);
  --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: #141715;
    --color-surface: #1B1F1D;
    --color-surface-sunken: #101211;
    --color-surface-raised: #232825;
    --color-border: #2E3430;
    --color-border-strong: #6E766F;
    --color-text: #ECEEEA;
    --color-text-muted: #B2B9B3;
    --color-text-subtle: #8E968F;
    --color-accent: #72D0A2;
    --color-accent-hover: #8EDCB5;
    --color-accent-text: #0C2118;
    --color-accent-subtle: #1C3A2D;
    --color-focus: #72D0A2;
    --color-success: #9BD27F;
    --color-success-subtle: #22331A;
    --color-warning: #F0B65A;
    --color-warning-subtle: #3A2C14;
    --color-danger: #F59A8F;
    --color-danger-subtle: #3E1F1B;
    --color-info: #86BFE8;
    --color-info-subtle: #172E40;
    --color-call-live: #72D0A2;
    --color-call-ringing: #F0B65A;
    --color-overlay: rgb(5 7 6 / 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: #141715;
  --color-surface: #1B1F1D;
  --color-surface-sunken: #101211;
  --color-surface-raised: #232825;
  --color-border: #2E3430;
  --color-border-strong: #6E766F;
  --color-text: #ECEEEA;
  --color-text-muted: #B2B9B3;
  --color-text-subtle: #8E968F;
  --color-accent: #72D0A2;
  --color-accent-hover: #8EDCB5;
  --color-accent-text: #0C2118;
  --color-accent-subtle: #1C3A2D;
  --color-focus: #72D0A2;
  --color-success: #9BD27F;
  --color-success-subtle: #22331A;
  --color-warning: #F0B65A;
  --color-warning-subtle: #3A2C14;
  --color-danger: #F59A8F;
  --color-danger-subtle: #3E1F1B;
  --color-info: #86BFE8;
  --color-info-subtle: #172E40;
  --color-call-live: #72D0A2;
  --color-call-ringing: #F0B65A;
  --color-overlay: rgb(5 7 6 / 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;
  }
}