/* DF1 design tokens. The only place colors, radii, shadows and type sizes are defined (PRD R5.1).
 *
 * Origin: the WebEaze portal and site tokens (css/theme.css, portal/index.html), renamed to one
 * vocabulary. The brand comes in four schemes (PRD R5.2); a scheme block redefines only the
 * brand tokens. The site Worker sets data-scheme on <html> from the admin setting (PRD R6).
 *
 * Two things never invert in dark mode (the WebEaze rule):
 *   --on-accent   white text on a colored fill, the same in both themes.
 *   *-fill        colors drawn behind white text; they stay dark while their text twins lighten.
 *
 * The ops portal copies this file and replaces the dark media query with
 * :root[data-theme="dark"] (docs/design/README.md). scripts/check-contrast.mjs parses this file;
 * keep each block a flat list of custom properties.
 */

:root {
  /* type */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --fs-base: 17px;
  --lh-base: 1.65;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-h3: 1.2rem;
  --fs-h2: clamp(1.75rem, 3vw, 2.35rem);
  --fs-h1: clamp(2.1rem, 4.4vw, 3.4rem);

  /* shape */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --w-header: 1200px;
  --w-content: 1080px;
  --w-prose: 760px;
  --header-h: 64px;

  /* grounds and surfaces */
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #fafafa;
  --border: #e5e7eb;
  --line-2: #e4e7f1;
  --footer-bg: #0a0a0f;

  /* fixed in both themes: the footer and dark bands, and white buttons on them */
  --footer-text: #9ca3af;
  --footer-link: #adb5bd;
  --footer-heading: #ffffff;
  --footer-line: rgba(255,255,255,.10);
  --white: #ffffff;
  --white-hover: #eef0f5;
  --black: #0a0a0a;
  --white-line: rgba(255,255,255,.45);

  /* text */
  --heading: #0a0a0a;
  --text: #1a1a1a;
  --muted: #4b5563;
  --muted2: #5b6170;
  --on-accent: #ffffff;

  /* status */
  --gold: #8a5c00;
  --gold-fill: #8a5c00;
  --gold-soft: rgba(138,92,0,.10);
  --green: #15803d;
  --green-fill: #15803d;
  --green-soft: rgba(21,128,61,.10);
  --red: #c42b2b;
  --red-fill: #c42b2b;
  --red-soft: rgba(196,43,43,.10);

  /* brand: cobalt, the default scheme (decision D4) */
  --brand: #2b50c8;
  --brand-fill: #2b50c8;
  --brand-fill-hover: #2140a8;
  --brand-tint: rgba(43,80,200,.08);
  --brand-border: rgba(43,80,200,.22);

  /* elevation */
  --shadow-sm: 0 2px 10px rgba(15,18,40,.06);
  --shadow-md: 0 4px 24px rgba(15,18,40,.08);
  --shadow-lg: 0 16px 48px rgba(15,18,40,.12);
}

:root[data-scheme="teal"] {
  --brand: #0f766e;
  --brand-fill: #0f766e;
  --brand-fill-hover: #0c5f58;
  --brand-tint: rgba(15,118,110,.08);
  --brand-border: rgba(15,118,110,.22);
}

:root[data-scheme="graphite"] {
  --brand: #1f2937;
  --brand-fill: #b45309;
  --brand-fill-hover: #92400e;
  --brand-tint: rgba(180,83,9,.08);
  --brand-border: rgba(180,83,9,.22);
}

:root[data-scheme="emerald"] {
  --brand: #047857;
  --brand-fill: #047857;
  --brand-fill-hover: #036747;
  --brand-tint: rgba(4,120,87,.08);
  --brand-border: rgba(4,120,87,.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1016;
    --surface: #14161d;
    --surface-2: #1b1e27;
    --surface-3: #181b23;
    --border: #2a2e3a;
    --line-2: #2c3040;

    --heading: #f2f3f7;
    --text: #e8eaf2;
    --muted: #b6bccb;
    --muted2: #a3a9bd;

    --gold: #fbbf24;
    --gold-fill: #8a5d0c;
    --gold-soft: rgba(251,191,36,.14);
    --green: #34d399;
    --green-fill: #12693a;
    --green-soft: rgba(52,211,153,.14);
    --red: #f87171;
    --red-fill: #a32020;
    --red-soft: rgba(248,113,113,.14);

    --brand: #9db3ff;
    --brand-fill: #3a5be0;
    --brand-fill-hover: #3150c8;
    --brand-tint: rgba(157,179,255,.14);
    --brand-border: rgba(157,179,255,.30);

    --shadow-sm: 0 2px 12px rgba(0,0,0,.45);
    --shadow-md: 0 6px 28px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 52px rgba(0,0,0,.55);
  }

  :root[data-scheme="teal"] {
    --brand: #5eead4;
    --brand-fill: #0f766e;
    --brand-fill-hover: #0c5f58;
    --brand-tint: rgba(94,234,212,.14);
    --brand-border: rgba(94,234,212,.30);
  }

  :root[data-scheme="graphite"] {
    --brand: #fbbf24;
    --brand-fill: #b45309;
    --brand-fill-hover: #92400e;
    --brand-tint: rgba(251,191,36,.14);
    --brand-border: rgba(251,191,36,.30);
  }

  :root[data-scheme="emerald"] {
    --brand: #6ee7b7;
    --brand-fill: #047857;
    --brand-fill-hover: #036747;
    --brand-tint: rgba(110,231,183,.14);
    --brand-border: rgba(110,231,183,.30);
  }
}