/* Smart Pick Consulting — design tokens.
   Copied from /Users/mo/Projects/smart-pick-brand/tokens/tokens.css (source of truth for the brand).
   Self-hosted fonts per BRAND_GUIDELINES.md — do not switch back to the Google Fonts CDN. */

@font-face { font-family: "Zilla Slab"; font-weight: 500; font-display: swap; src: url("fonts/zilla-slab/ZillaSlab-Medium.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 600; font-display: swap; src: url("fonts/zilla-slab/ZillaSlab-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap; src: url("fonts/zilla-slab/ZillaSlab-Bold.woff2") format("woff2"); }

@font-face { font-family: "Work Sans"; font-weight: 400; font-display: swap; src: url("fonts/work-sans/WorkSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 500; font-display: swap; src: url("fonts/work-sans/WorkSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600; font-display: swap; src: url("fonts/work-sans/WorkSans-SemiBold.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2") format("woff2"); }

:root {
  /* ---- color: light (default) ---- */
  --ink-900: #0b1420;
  --ink-700: #16283a;
  --ink-500: #33424f;
  --teal-600: #1f6f78;   /* text/link use — meets contrast on paper */
  --teal-500: #2f8f97;   /* brand teal — marks, large surfaces, illustration */
  --teal-300: #8ad0d4;   /* light teal — accents on dark grounds */
  --paper-50: #f5f7f6;
  --paper-100: #eef2f0;
  --slate-500: #5b6b74;
  --slate-300: #b9c4c8;
  --coral-500: #c1442f;
  --coral-400: #f2705f;

  /* ---- semantic ---- */
  --color-bg: var(--paper-100);
  --color-surface: #ffffff;
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-accent: var(--teal-600);
  --color-accent-strong: var(--teal-500);
  --color-border: #d7ddda;
  --color-flag: var(--coral-500);

  /* ---- type ---- */
  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --text-display-xl: 700 52px/1.08 var(--font-display);
  --text-display-lg: 700 36px/1.12 var(--font-display);
  --text-display-md: 600 26px/1.2 var(--font-display);
  --text-body-lg: 400 18px/1.55 var(--font-body);
  --text-body-md: 400 16px/1.55 var(--font-body);
  --text-label: 600 13px/1.3 var(--font-body);
  --text-eyebrow: 700 12px/1.3 var(--font-data);

  /* ---- space / radius ---- */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a1420;
    --color-surface: #101d2c;
    --color-text: var(--paper-50);
    --color-text-muted: var(--slate-300);
    --color-accent: var(--teal-300);
    --color-accent-strong: var(--teal-500);
    --color-border: #22323f;
    --color-flag: var(--coral-400);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #0a1420; --color-surface: #101d2c; --color-text: var(--paper-50);
  --color-text-muted: var(--slate-300); --color-accent: var(--teal-300);
  --color-accent-strong: var(--teal-500); --color-border: #22323f; --color-flag: var(--coral-400);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --color-bg: var(--paper-100); --color-surface: #ffffff; --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500); --color-accent: var(--teal-600);
  --color-accent-strong: var(--teal-500); --color-border: #d7ddda; --color-flag: var(--coral-500);
  color-scheme: light;
}