/* Base tokens — theme-agnostic scales + tunable slots that every skin
 * overrides via [data-theme="..."] in themes.css. Skins change colors,
 * type pairing, radius, density, motion, grain, and layout geometry —
 * not just hues. Default values below are the "Monolith" flavor so the
 * cascade has something sane before themes.css loads. */

:root {
  color-scheme: dark light;

  /* --- Type scale (fluid, rem) --- */
  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4rem;
  --fs-6xl: 5.25rem;

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* --- Spacing (4px base, multiplied per theme by --theme-density) --- */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  /* --- Motion primitives --- */
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);

  /* Base duration constants. Components should multiply by --theme-motion-scale. */
  --dur-snap-base:  120ms;
  --dur-fast-base:  200ms;
  --dur-base-base:  320ms;
  --dur-slow-base:  520ms;
  --dur-crawl-base: 900ms;
  --theme-motion-scale: 1;
  --dur-snap:  calc(var(--dur-snap-base)  * var(--theme-motion-scale));
  --dur-fast:  calc(var(--dur-fast-base)  * var(--theme-motion-scale));
  --dur-base:  calc(var(--dur-base-base)  * var(--theme-motion-scale));
  --dur-slow:  calc(var(--dur-slow-base)  * var(--theme-motion-scale));
  --dur-crawl: calc(var(--dur-crawl-base) * var(--theme-motion-scale));

  /* --- Layout --- */
  --container-max: 1320px;
  --container-pad: clamp(1rem, 2.5vw, 2rem);

  --z-bg:     -1;
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-tooltip: 1200;

  /* --- Theme-tunable slots (all themes override these) --- */
  --theme-radius-card:  14px;
  --theme-radius-btn:   9999px;
  --theme-radius-pill:  9999px;
  --theme-radius-input: 10px;
  --theme-radius-inset: 6px;

  --theme-density:        1;     /* multiplies paddings in cards/buttons */
  --theme-grain:          0;     /* 0..0.12 noise overlay opacity */
  --theme-border-width:   1px;
  --theme-surface-alpha:  1;     /* 0.5..1 — how solid cards are */
  --theme-card-blur:      0px;   /* backdrop-filter blur on panels */
  --theme-bento-gap:      var(--sp-4);
  --theme-offset-y:       0px;   /* alternating cell vertical offset (Biomorph) */

  --theme-display-tracking: -0.02em;
  --theme-body-tracking:    -0.005em;
  --theme-display-case:     none; /* uppercase | none */

  /* Type slots — each theme points these at a loaded variable font. */
  --ff-theme-display: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --ff-theme-body:    "Figtree", ui-sans-serif, system-ui, sans-serif;
  --ff-theme-mono:    "JetBrains Mono", ui-monospace, monospace;

  --wght-display:       560;
  --wght-display-hero:  600;
  --wght-body:          400;
  --wght-body-strong:   620;

  /* Fraunces-specific axes (only active when display uses Fraunces) */
  --frau-soft: 50;
  --frau-wonk: 0;
  --frau-opsz: 144;

  /* --- Color slots (each theme overrides; keep these as fallbacks) --- */
  --surface-void:  #05070B;
  --surface-0:     #141619;
  --surface-1:     #1A1D21;
  --surface-2:     #2C2E3A;
  --surface-3:     #383B47;
  --surface-inset: #0E1013;

  --ink-high:    #F5F6F7;
  --ink-mid:     rgba(245, 246, 247, 0.72);
  --ink-low:     rgba(245, 246, 247, 0.5);
  --ink-whisper: rgba(245, 246, 247, 0.3);

  --line-soft:   rgba(179, 180, 189, 0.08);
  --line-mid:    rgba(179, 180, 189, 0.18);
  --line-strong: rgba(179, 180, 189, 0.32);

  --color-primary:   #0A21C0;
  --color-accent:    #5271FF;
  --color-secondary: #050A44;

  --brand-leaf:  #16A34A;
  --brand-amber: #EAB308;
  --brand-rose:  #E11D48;
  --brand-sky:   #0EA5E9;

  /* Layered shadows — theme-tunable via custom properties if needed */
  --shadow-sm:     0 1px 2px rgba(5, 7, 11, 0.4), 0 1px 1px rgba(5, 7, 11, 0.3);
  --shadow-md:     0 8px 22px -12px rgba(5, 7, 11, 0.55), 0 2px 4px rgba(5, 7, 11, 0.35);
  --shadow-lift:   0 24px 60px -24px rgba(5, 7, 11, 0.7), 0 6px 16px -8px rgba(5, 7, 11, 0.45);
  --shadow-dialog: 0 40px 120px -40px rgba(5, 7, 11, 0.8), 0 12px 32px -12px rgba(5, 7, 11, 0.55);
  --shadow-inner:  inset 0 1px 0 rgba(245, 246, 247, 0.04);
  --shadow-glow:   0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent),
                   0 12px 40px -8px color-mix(in oklab, var(--color-primary) 28%, transparent);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 45%, transparent);
}

/* Smooth theme swap — JS toggles .theme-swapping during the ~500ms attribute change */
html.theme-swapping,
html.theme-swapping body,
html.theme-swapping *:not(.skip-theme-anim) {
  transition: background-color var(--dur-base) var(--ease-out-soft),
              color var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              border-radius var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft) !important;
}

/* Grain overlay — pinned to root, opacity driven by theme */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: var(--theme-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root { --theme-motion-scale: 0; }
  html::after { display: none; }
}

/* Themed scrollbars — blend into the active skin's surface stack so the
 * scrollbar reads as part of the UI instead of a stark browser default. */
html {
  scrollbar-color: color-mix(in oklab, var(--color-primary) 30%, var(--surface-2)) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--color-primary) 26%, var(--surface-2));
  border-radius: var(--theme-radius-pill);
  border: 2px solid var(--surface-0);
  transition: background var(--dur-fast) var(--ease-out-soft);
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--color-primary) 50%, var(--surface-2));
}
*::-webkit-scrollbar-corner { background: transparent; }