/**
 * PragCore design tokens — canonical source.
 * Synced to public/css/pragcore-tokens.css for Firebase Hosting.
 *
 * Theming: **dark** is the default (void-first brand). `theme.js` can pin
 * explicit `light`, `dark`, or `system`; no-JS fallback still follows
 * `prefers-color-scheme`.
 *
 * @see Shared/README.md and Shared/Standards/DESIGN_SYSTEM.md (paths from Personal/PragCore/ hosting root)
 */
:root {
  color-scheme: dark;

  /* ——— Core palette (dark) ——— */
  --void: #030306;
  --ink: #0a0a12;
  --surface: rgba(12, 12, 22, 0.65);
  --text: #e8e4f4;
  --text-display: #f0ecfa;
  --muted: rgba(218, 214, 236, 0.82);
  --cyan: #00e8d8;
  --magenta: #ff2d8b;
  --lime: #c4fb4f;

  --font-display: "Syne", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Durations — numeric mirrors in tokens.json → motion.*Ms (keep in sync). */
  --duration-ui-fast: 200ms;
  --duration-ui-medium: 250ms;
  --duration-loader-fade: 800ms;
  --duration-loader-bar: 150ms;
  --duration-grain-shift: 500ms;
  --duration-scroll-pulse: 2.2s;
  --header-h: 4.25rem;

  /* Legibility (copy over WebGL / bloom) */
  --text-legibility: 0 1px 2px rgba(0, 0, 0, 0.92), 0 2px 14px rgba(0, 0, 0, 0.72), 0 4px 32px rgba(0, 0, 0, 0.5);
  --text-legibility-tight: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.65);
  --text-legibility-display: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 24px rgba(0, 0, 0, 0.78), 0 8px 48px rgba(0, 0, 0, 0.42);
  --text-scene-halo: 0 0 12px rgba(0, 0, 0, 0.84), 0 2px 5px rgba(0, 0, 0, 0.76), 0 1px 2px rgba(0, 0, 0, 0.92);
  --text-scene-halo-tight: 0 0 9px rgba(0, 0, 0, 0.82), 0 1px 3px rgba(0, 0, 0, 0.86);

  /* ——— Chrome / marketing shell (dark) ——— */
  --chrome-vignette: radial-gradient(ellipse 68% 52% at 50% 45%, transparent 0%, rgba(3, 3, 6, 0.62) 100%);
  --chrome-header-blend: difference;
  --chrome-header-fg: #fff;
  --chrome-header-safari-bg: linear-gradient(180deg, rgba(3, 3, 8, 0.88) 0%, rgba(3, 3, 8, 0.45) 72%, transparent 100%);
  --chrome-header-mobile-bg: linear-gradient(180deg, rgba(3, 3, 8, 0.92) 0%, rgba(3, 3, 8, 0.55) 72%, transparent 100%);
  --chrome-hero-scrim: radial-gradient(
    ellipse 115% 135% at 14% 38%,
    rgba(4, 3, 12, 0.42) 0%,
    rgba(4, 3, 12, 0.18) 36%,
    transparent 70%
  );
  --chrome-hero-scrim-rm: radial-gradient(
    ellipse 125% 85% at 14% 48%,
    rgba(6, 5, 16, 0.88) 0%,
    rgba(4, 4, 12, 0.5) 45%,
    transparent 78%
  );
  --chrome-bg-label: rgba(255, 255, 255, 0.03);
  --chrome-hairline: rgba(255, 255, 255, 0.08);
  --chrome-project-bg: rgba(255, 255, 255, 0.03);
  --chrome-project-border: rgba(255, 255, 255, 0.1);
  --chrome-project-glow: rgba(0, 232, 216, 0.12);
  --chrome-changelog-border: rgba(0, 232, 216, 0.45);
  --chrome-code-bg: rgba(255, 255, 255, 0.06);
  --chrome-footer-border: rgba(255, 255, 255, 0.06);
  --chrome-code-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.65);
  --chrome-link-shadow: 0 1px 3px rgba(0, 0, 0, 0.92), 0 2px 12px rgba(0, 0, 0, 0.65);
  --chrome-footer-link-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  --chrome-compiled-drop: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.82)) drop-shadow(0 0 5px rgba(0, 232, 216, 0.28))
    drop-shadow(0 0 16px rgba(0, 232, 216, 0.1));
  --chrome-eyebrow-line: linear-gradient(90deg, rgba(0, 232, 216, 0.92), rgba(0, 232, 216, 0.28));
  --chrome-rail-mid: rgba(0, 232, 216, 0.15);
  --chrome-rm-body-radial: radial-gradient(120% 80% at 50% -20%, #1a1030 0%, var(--void) 45%);

  --brand-glyph-glow: 0 0 18px rgba(0, 232, 216, 0.5);
  --brand-text-shadow: 0 0 12px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.75);
  --nav-link-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 1px 6px rgba(0, 0, 0, 0.7);
  --audio-border: rgba(255, 255, 255, 0.2);
  --audio-text-shadow: 0 0 8px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.75);
  --audio-pressed-glow: 0 0 20px rgba(255, 45, 139, 0.25);

  --btn-primary-bg: #d8d4e8;
  --btn-primary-bg-hover: #e4e0f2;
  --btn-ghost-border: rgba(255, 255, 255, 0.34);
  --btn-ghost-color: rgba(236, 232, 248, 0.95);
  --btn-quiet-border: rgba(255, 255, 255, 0.18);
  --btn-quiet-color: rgba(230, 226, 244, 0.92);

  --pillar-tint-1: rgba(255, 45, 139, 0.06);
  --pillar-tint-2: rgba(0, 232, 216, 0.04);
  --pillar-border: rgba(255, 255, 255, 0.08);

  --skip-fg: var(--void);

  /* Hero canvas: full opacity in dark; light theme softens GL slightly (main.css .webgl) */
  --webgl-light-opacity: 1;
  --webgl-fog: #030306;
  --webgl-star: #a89fff;
  --webgl-ambient: #2a2048;
  --webgl-hemi-sky: #16172c;
  --webgl-hemi-ground: #05050a;
}

/*
 * `data-resolved-theme` comes from Shared/DesignSystem/theme.js. Keep the media
 * fallback below for no-JS loads so system appearance still applies.
 */
:root[data-resolved-theme="light"] {
  color-scheme: light;

  --void: #f3f1fb;
  --ink: #0c0a14;
  --surface: rgba(255, 255, 255, 0.9);
  --text: #161222;
  --text-display: #0e0c18;
  --muted: rgba(52, 44, 72, 0.75);
  --cyan: #009689;
  --magenta: #c91062;
  --lime: #5c7800;

  --text-legibility: 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 10px rgba(255, 255, 255, 0.65),
    0 2px 24px rgba(0, 0, 0, 0.08);
  --text-legibility-tight: 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 6px rgba(255, 255, 255, 0.5),
    0 1px 12px rgba(0, 0, 0, 0.06);
  --text-legibility-display: 0 1px 0 rgba(255, 255, 255, 0.98), 0 2px 14px rgba(255, 255, 255, 0.55),
    0 4px 28px rgba(0, 0, 0, 0.1);
  --text-scene-halo: 0 0 10px rgba(255, 255, 255, 0.92), 0 1px 3px rgba(0, 0, 0, 0.12);
  --text-scene-halo-tight: 0 0 8px rgba(255, 255, 255, 0.88), 0 1px 2px rgba(0, 0, 0, 0.1);

  --chrome-vignette: radial-gradient(ellipse 72% 58% at 50% 42%, transparent 0%, rgba(120, 110, 160, 0.22) 100%);
  --chrome-header-blend: normal;
  --chrome-header-fg: var(--text-display);
  --chrome-header-safari-bg: linear-gradient(
    180deg,
    rgba(243, 241, 251, 0.96) 0%,
    rgba(243, 241, 251, 0.78) 72%,
    transparent 100%
  );
  --chrome-header-mobile-bg: linear-gradient(
    180deg,
    rgba(243, 241, 251, 0.98) 0%,
    rgba(243, 241, 251, 0.85) 72%,
    transparent 100%
  );
  --chrome-hero-scrim: radial-gradient(
    ellipse 115% 135% at 14% 38%,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.28) 38%,
    transparent 72%
  );
  --chrome-hero-scrim-rm: radial-gradient(
    ellipse 125% 85% at 14% 48%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(243, 241, 251, 0.65) 45%,
    transparent 78%
  );
  --chrome-bg-label: rgba(14, 12, 24, 0.045);
  --chrome-hairline: rgba(14, 12, 24, 0.12);
  --chrome-project-bg: rgba(255, 255, 255, 0.78);
  --chrome-project-border: rgba(14, 12, 24, 0.12);
  --chrome-project-glow: rgba(0, 150, 137, 0.2);
  --chrome-changelog-border: rgba(0, 150, 137, 0.5);
  --chrome-code-bg: rgba(14, 12, 24, 0.06);
  --chrome-footer-border: rgba(14, 12, 24, 0.1);
  --chrome-code-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 8px rgba(0, 0, 0, 0.06);
  --chrome-link-shadow: 0 1px 2px rgba(255, 255, 255, 0.75), 0 1px 10px rgba(0, 0, 0, 0.08);
  --chrome-footer-link-shadow: none;
  --chrome-compiled-drop: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(0, 150, 137, 0.2))
    drop-shadow(0 1px 8px rgba(0, 0, 0, 0.12));
  --chrome-eyebrow-line: linear-gradient(90deg, rgba(0, 150, 137, 0.95), rgba(0, 150, 137, 0.35));
  --chrome-rail-mid: rgba(0, 150, 137, 0.22);
  --chrome-rm-body-radial: radial-gradient(120% 80% at 50% -20%, #e4dff5 0%, var(--void) 45%);

  --brand-glyph-glow: 0 0 14px rgba(0, 150, 137, 0.35);
  --brand-text-shadow: none;
  --nav-link-shadow: none;
  --audio-border: rgba(14, 12, 24, 0.22);
  --audio-text-shadow: none;
  --audio-pressed-glow: 0 0 18px rgba(201, 16, 98, 0.28);

  --btn-primary-bg: #d4e8e5;
  --btn-primary-bg-hover: #c5ddd9;
  --btn-ghost-border: rgba(14, 12, 24, 0.18);
  --btn-ghost-color: var(--text);
  --btn-quiet-border: rgba(14, 12, 24, 0.16);
  --btn-quiet-color: rgba(30, 26, 48, 0.9);

  --pillar-tint-1: rgba(201, 16, 98, 0.07);
  --pillar-tint-2: rgba(0, 150, 137, 0.06);
  --pillar-border: rgba(14, 12, 24, 0.1);

  --skip-fg: #fff;

  --webgl-light-opacity: 0.9;
  --webgl-fog: #d8d1e1;
  --webgl-star: #5b8ab3;
  --webgl-ambient: #ffe6f1;
  --webgl-hemi-sky: #fafbff;
  --webgl-hemi-ground: #d8cfe4;
}

@media (prefers-color-scheme: light) {
  :root:not([data-resolved-theme]) {
    color-scheme: light;

    --void: #f3f1fb;
    --ink: #0c0a14;
    --surface: rgba(255, 255, 255, 0.9);
    --text: #161222;
    --text-display: #0e0c18;
    --muted: rgba(52, 44, 72, 0.75);
    --cyan: #009689;
    --magenta: #c91062;
    --lime: #5c7800;

    --text-legibility: 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 10px rgba(255, 255, 255, 0.65),
      0 2px 24px rgba(0, 0, 0, 0.08);
    --text-legibility-tight: 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 6px rgba(255, 255, 255, 0.5),
      0 1px 12px rgba(0, 0, 0, 0.06);
    --text-legibility-display: 0 1px 0 rgba(255, 255, 255, 0.98), 0 2px 14px rgba(255, 255, 255, 0.55),
      0 4px 28px rgba(0, 0, 0, 0.1);
    --text-scene-halo: 0 0 10px rgba(255, 255, 255, 0.92), 0 1px 3px rgba(0, 0, 0, 0.12);
    --text-scene-halo-tight: 0 0 8px rgba(255, 255, 255, 0.88), 0 1px 2px rgba(0, 0, 0, 0.1);

    --chrome-vignette: radial-gradient(ellipse 72% 58% at 50% 42%, transparent 0%, rgba(120, 110, 160, 0.22) 100%);
    --chrome-header-blend: normal;
    --chrome-header-fg: var(--text-display);
    --chrome-header-safari-bg: linear-gradient(
      180deg,
      rgba(243, 241, 251, 0.96) 0%,
      rgba(243, 241, 251, 0.78) 72%,
      transparent 100%
    );
    --chrome-header-mobile-bg: linear-gradient(
      180deg,
      rgba(243, 241, 251, 0.98) 0%,
      rgba(243, 241, 251, 0.85) 72%,
      transparent 100%
    );
    --chrome-hero-scrim: radial-gradient(
      ellipse 115% 135% at 14% 38%,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.28) 38%,
      transparent 72%
    );
    --chrome-hero-scrim-rm: radial-gradient(
      ellipse 125% 85% at 14% 48%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(243, 241, 251, 0.65) 45%,
      transparent 78%
    );
    --chrome-bg-label: rgba(14, 12, 24, 0.045);
    --chrome-hairline: rgba(14, 12, 24, 0.12);
    --chrome-project-bg: rgba(255, 255, 255, 0.78);
    --chrome-project-border: rgba(14, 12, 24, 0.12);
    --chrome-project-glow: rgba(0, 150, 137, 0.2);
    --chrome-changelog-border: rgba(0, 150, 137, 0.5);
    --chrome-code-bg: rgba(14, 12, 24, 0.06);
    --chrome-footer-border: rgba(14, 12, 24, 0.1);
    --chrome-code-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 8px rgba(0, 0, 0, 0.06);
    --chrome-link-shadow: 0 1px 2px rgba(255, 255, 255, 0.75), 0 1px 10px rgba(0, 0, 0, 0.08);
    --chrome-footer-link-shadow: none;
    --chrome-compiled-drop: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 4px rgba(0, 150, 137, 0.2)) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.12));
    --chrome-eyebrow-line: linear-gradient(90deg, rgba(0, 150, 137, 0.95), rgba(0, 150, 137, 0.35));
    --chrome-rail-mid: rgba(0, 150, 137, 0.22);
    --chrome-rm-body-radial: radial-gradient(120% 80% at 50% -20%, #e4dff5 0%, var(--void) 45%);

    --brand-glyph-glow: 0 0 14px rgba(0, 150, 137, 0.35);
    --brand-text-shadow: none;
    --nav-link-shadow: none;
    --audio-border: rgba(14, 12, 24, 0.22);
    --audio-text-shadow: none;
    --audio-pressed-glow: 0 0 18px rgba(201, 16, 98, 0.28);

    --btn-primary-bg: #d4e8e5;
    --btn-primary-bg-hover: #c5ddd9;
    --btn-ghost-border: rgba(14, 12, 24, 0.18);
    --btn-ghost-color: var(--text);
    --btn-quiet-border: rgba(14, 12, 24, 0.16);
    --btn-quiet-color: rgba(30, 26, 48, 0.9);

    --pillar-tint-1: rgba(201, 16, 98, 0.07);
    --pillar-tint-2: rgba(0, 150, 137, 0.06);
    --pillar-border: rgba(14, 12, 24, 0.1);

    --skip-fg: #fff;

    --webgl-light-opacity: 0.9;
    --webgl-fog: #eceaf8;
    --webgl-star: #6a819e;
    --webgl-ambient: #fff3fb;
    --webgl-hemi-sky: #ffffff;
    --webgl-hemi-ground: #edd7e7;
  }
}