/* ============================================================================
   Prism · MD3 design tokens
   The runtime color engine (js/color.js) regenerates every --md-* color from a
   seed hue in OKLCH and writes them onto :root. The values here are the
   no-JS / pre-paint fallback for the default seed (hue 265) and everything
   non-color: type scale, shape, elevation, motion, state layers.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------ color roles · light · seed 265 ------ */
  --md-primary: oklch(0.52 0.126 265);
  --md-on-primary: oklch(1 0 0);
  --md-primary-container: oklch(0.945 0.064 265);
  --md-on-primary-container: oklch(0.21 0.064 265);
  --md-secondary: oklch(0.52 0.0436 265);
  --md-on-secondary: oklch(1 0 0);
  --md-secondary-container: oklch(0.945 0.0222 265);
  --md-on-secondary-container: oklch(0.21 0.0222 265);
  --md-tertiary: oklch(0.52 0.0873 325);
  --md-on-tertiary: oklch(1 0 0);
  --md-tertiary-container: oklch(0.945 0.0445 325);
  --md-on-tertiary-container: oklch(0.21 0.0445 325);
  --md-error: oklch(0.52 0.1358 29);
  --md-on-error: oklch(1 0 0);
  --md-error-container: oklch(0.945 0.0692 29);
  --md-on-error-container: oklch(0.21 0.0692 29);

  --md-surface: oklch(0.985 0.006 265);
  --md-surface-dim: oklch(0.92 0.009 265);
  --md-surface-container-lowest: oklch(1 0 0);
  --md-surface-container-low: oklch(0.972 0.007 265);
  --md-surface-container: oklch(0.955 0.008 265);
  --md-surface-container-high: oklch(0.938 0.009 265);
  --md-surface-container-highest: oklch(0.92 0.01 265);
  --md-on-surface: oklch(0.21 0.012 265);
  --md-on-surface-variant: oklch(0.42 0.021 265);
  --md-outline: oklch(0.62 0.024 265);
  --md-outline-variant: oklch(0.88 0.017 265);
  --md-inverse-surface: oklch(0.32 0.014 265);
  --md-inverse-on-surface: oklch(0.972 0.008 265);
  --md-inverse-primary: oklch(0.88 0.0945 265);
  --md-scrim: oklch(0 0 0);
  --md-shadow: oklch(0 0 0);

  /* accent tones the shaders + gradients read (updated by color.js) */
  --glow-a: oklch(0.71 0.126 265);
  --glow-b: oklch(0.71 0.0873 325);
  --glow-c: oklch(0.88 0.0436 265);
  /* darker pair for gradient-clipped text — the decorative glows are only
     ~2.5:1 on a light surface */
  --glow-text-a: oklch(0.52 0.126 265);
  --glow-text-b: oklch(0.52 0.0873 325);
  --tok-muted: oklch(0.52 0.024 265);

  /* ------ state layers ------ */
  --state-hover: 8%;
  --state-focus: 10%;
  --state-press: 12%;

  /* ------ shape scale ------ */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;
  --shape-squircle: 42% 58% 62% 38% / 45% 42% 58% 55%;

  /* ------ elevation (ambient + key) ------ */
  --elev-1: 0 1px 2px oklch(0 0 0 / 0.10), 0 1px 3px 1px oklch(0 0 0 / 0.05);
  --elev-2: 0 1px 2px oklch(0 0 0 / 0.10), 0 2px 6px 2px oklch(0 0 0 / 0.06);
  --elev-3: 0 4px 8px 3px oklch(0 0 0 / 0.07), 0 1px 3px oklch(0 0 0 / 0.10);
  --elev-4: 0 6px 10px 4px oklch(0 0 0 / 0.08), 0 2px 3px oklch(0 0 0 / 0.10);
  --elev-5: 0 8px 12px 6px oklch(0 0 0 / 0.09), 0 4px 4px oklch(0 0 0 / 0.10);

  /* ------ typography ------ */
  --font-display: "Google Sans", "Product Sans", "Segoe UI Variable Display",
    "SF Pro Display", ui-rounded, system-ui, -apple-system, sans-serif;
  --font-body: "Roboto Flex", "Segoe UI Variable Text", "SF Pro Text",
    system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", "JetBrains Mono", ui-monospace,
    "Roboto Mono", Menlo, Consolas, monospace;

  --type-display-lg: clamp(2.9rem, 2rem + 4.2vw, 5.6rem);
  --type-display-md: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --type-headline-lg: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --type-headline-md: clamp(1.45rem, 1.3rem + 0.8vw, 1.85rem);
  --type-headline-sm: 1.35rem;
  --type-title-lg: 1.2rem;
  --type-title-md: 1rem;
  --type-title-sm: 0.875rem;
  --type-body-lg: 1.0625rem;
  --type-body-md: 0.9375rem;
  --type-body-sm: 0.8125rem;
  --type-label-lg: 0.875rem;
  --type-label-md: 0.75rem;
  --type-label-sm: 0.6875rem;

  /* ------ motion ------ */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: linear(0, 0.0104 1.1%, 0.0455 2.4%, 0.1096 3.9%, 0.2907 7.4%,
    0.7113 14.7%, 0.8557 17.5%, 0.9622 20.4%, 1.0035 21.9%, 1.0369 23.5%,
    1.0748 26.7%, 1.0808 28.4%, 1.0768 30.3%, 1.0433 34.6%, 0.9911 42%,
    0.9714 47%, 0.9709 50.9%, 1.0007 62.5%, 1.0056 68.1%, 0.9999 100%);
  --dur-short: 150ms;
  --dur-medium: 300ms;
  --dur-long: 450ms;
  --dur-xlong: 650ms;

  /* ------ layout ------ */
  --content-width: 76rem;
  --prose-width: 45rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --appbar-h: 4rem;

  /* grain overlay (data-uri SVG turbulence) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------------------------------- dark ---------------------------------- */

:root[data-theme="dark"] {
  color-scheme: dark;

  --md-primary: oklch(0.88 0.0945 265);
  --md-on-primary: oklch(0.32 0.0945 265);
  --md-primary-container: oklch(0.42 0.1145 265);
  --md-on-primary-container: oklch(0.945 0.064 265);
  --md-secondary: oklch(0.88 0.0327 265);
  --md-on-secondary: oklch(0.32 0.0327 265);
  --md-secondary-container: oklch(0.42 0.0396 265);
  --md-on-secondary-container: oklch(0.945 0.0222 265);
  --md-tertiary: oklch(0.88 0.0654 325);
  --md-on-tertiary: oklch(0.32 0.0654 325);
  --md-tertiary-container: oklch(0.42 0.0793 325);
  --md-on-tertiary-container: oklch(0.945 0.0445 325);
  --md-error: oklch(0.88 0.1018 29);
  --md-on-error: oklch(0.32 0.1018 29);
  --md-error-container: oklch(0.42 0.1233 29);
  --md-on-error-container: oklch(0.945 0.0692 29);

  --md-surface: oklch(0.155 0.011 265);
  --md-surface-dim: oklch(0.13 0.01 265);
  --md-surface-container-lowest: oklch(0.117 0.009 265);
  --md-surface-container-low: oklch(0.185 0.012 265);
  --md-surface-container: oklch(0.208 0.013 265);
  --md-surface-container-high: oklch(0.235 0.014 265);
  --md-surface-container-highest: oklch(0.26 0.015 265);
  --md-on-surface: oklch(0.92 0.012 265);
  --md-on-surface-variant: oklch(0.80 0.021 265);
  --md-outline: oklch(0.62 0.024 265);
  --md-outline-variant: oklch(0.32 0.019 265);
  --md-inverse-surface: oklch(0.92 0.012 265);
  --md-inverse-on-surface: oklch(0.32 0.014 265);
  --md-inverse-primary: oklch(0.52 0.126 265);

  --glow-a: oklch(0.71 0.126 265);
  --glow-b: oklch(0.71 0.0873 325);
  --glow-c: oklch(0.42 0.0396 265);
  --glow-text-a: oklch(0.71 0.126 265);
  --glow-text-b: oklch(0.71 0.0873 325);
  --tok-muted: var(--md-outline);

  --elev-1: 0 1px 3px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.3);
  --elev-2: 0 2px 6px 2px oklch(0 0 0 / 0.35), 0 1px 2px oklch(0 0 0 / 0.4);
  --elev-3: 0 4px 8px 3px oklch(0 0 0 / 0.38), 0 1px 3px oklch(0 0 0 / 0.42);
  --elev-4: 0 6px 10px 4px oklch(0 0 0 / 0.4), 0 2px 3px oklch(0 0 0 / 0.45);
  --elev-5: 0 8px 12px 6px oklch(0 0 0 / 0.44), 0 4px 4px oklch(0 0 0 / 0.48);
}

/* no-JS dark fallback mirrors the attribute block */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --md-primary: oklch(0.88 0.0945 265);
    --md-on-primary: oklch(0.32 0.0945 265);
    --md-primary-container: oklch(0.42 0.1145 265);
    --md-on-primary-container: oklch(0.945 0.064 265);
    --md-secondary: oklch(0.88 0.0327 265);
    --md-on-secondary: oklch(0.32 0.0327 265);
    --md-secondary-container: oklch(0.42 0.0396 265);
    --md-on-secondary-container: oklch(0.945 0.0222 265);
    --md-tertiary: oklch(0.88 0.0654 325);
    --md-on-tertiary: oklch(0.32 0.0654 325);
    --md-tertiary-container: oklch(0.42 0.0793 325);
    --md-on-tertiary-container: oklch(0.945 0.0445 325);
    --md-error: oklch(0.88 0.1018 29);
    --md-on-error: oklch(0.32 0.1018 29);
    --md-error-container: oklch(0.42 0.1233 29);
    --md-on-error-container: oklch(0.945 0.0692 29);
    --md-surface: oklch(0.155 0.011 265);
    --md-surface-dim: oklch(0.13 0.01 265);
    --md-surface-container-lowest: oklch(0.117 0.009 265);
    --md-surface-container-low: oklch(0.185 0.012 265);
    --md-surface-container: oklch(0.208 0.013 265);
    --md-surface-container-high: oklch(0.235 0.014 265);
    --md-surface-container-highest: oklch(0.26 0.015 265);
    --md-on-surface: oklch(0.92 0.012 265);
    --md-on-surface-variant: oklch(0.80 0.021 265);
    --md-outline: oklch(0.62 0.024 265);
    --md-outline-variant: oklch(0.32 0.019 265);
    --md-inverse-surface: oklch(0.92 0.012 265);
    --md-inverse-on-surface: oklch(0.32 0.014 265);
    --md-inverse-primary: oklch(0.52 0.126 265);
    --glow-a: oklch(0.71 0.126 265);
    --glow-b: oklch(0.71 0.0873 325);
    --glow-c: oklch(0.42 0.0396 265);
    --glow-text-a: oklch(0.71 0.126 265);
    --glow-text-b: oklch(0.71 0.0873 325);
    --tok-muted: var(--md-outline);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-short: 1ms;
    --dur-medium: 1ms;
    --dur-long: 1ms;
    --dur-xlong: 1ms;
  }
}