/* =========================================================
   Stash — design tokens (single source of truth)
   Brand hue: ink blue 262. Neutrals tinted toward it.
   Change the palette here; every page reads these variables.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Schibsted+Grotesk:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;

  /* ---- Type families ---- */
  --font-display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale: app (fixed rem, ratio ~1.25) ---- */
  --text-2xs: 0.6875rem;  /* 11 — meta labels, counters */
  --text-xs: 0.75rem;     /* 12 — captions, chips */
  --text-sm: 0.8125rem;   /* 13 — dense UI, tables */
  --text-md: 0.9375rem;   /* 15 — body UI */
  --text-lg: 1.125rem;    /* 18 — reader body, section titles */
  --text-xl: 1.5rem;      /* 24 — screen titles (display) */
  --text-2xl: 2rem;       /* 32 — doc title (display) */
  /* ---- Type scale: marketing (fluid) ---- */
  --text-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5.25rem);
  --text-h2: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  --text-h3: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  --text-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --leading-reader: 1.7;
  --tracking-display: -0.015em;
  --tracking-caps: 0.06em;

  /* ---- Spacing (4pt) ---- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: clamp(64px, 8vw, 128px);

  /* ---- Radius (restrained, squared-off) ---- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Color: neutrals (paper, tinted to hue 262) ---- */
  --paper: oklch(0.985 0.003 262);      /* page */
  --surface: oklch(0.995 0.002 262);    /* raised panels, inputs */
  --surface-2: oklch(0.965 0.005 262);  /* hover, subtle fills, chips */
  --surface-3: oklch(0.94 0.007 262);   /* pressed, skeleton */
  --line: oklch(0.905 0.007 262);       /* hairlines */
  --line-strong: oklch(0.82 0.01 262);
  --ink: oklch(0.2 0.012 262);          /* primary text */
  --ink-2: oklch(0.42 0.014 262);       /* secondary text (AA on paper) */
  --ink-3: oklch(0.53 0.014 262);       /* tertiary / meta (AA 4.5:1 on paper) */
  --ink-inverse: oklch(0.975 0.004 262);

  /* ---- Color: night (sidebar, AI popovers) ---- */
  --night: oklch(0.205 0.01 262);
  --night-2: oklch(0.255 0.012 262);
  --night-3: oklch(0.31 0.014 262);
  --night-line: oklch(0.33 0.012 262);
  --night-ink: oklch(0.95 0.005 262);
  --night-ink-2: oklch(0.76 0.01 262);

  /* ---- Color: accent (ink blue) ---- */
  --accent: oklch(0.47 0.15 262);
  --accent-hover: oklch(0.41 0.15 262);
  --on-accent: oklch(0.99 0.003 262);
  --accent-soft: oklch(0.94 0.035 262);
  --accent-ink: oklch(0.38 0.14 262);   /* accent text on soft bg */
  --highlight: oklch(0.9 0.06 262 / 0.7); /* text highlight in reader */
  --focus: oklch(0.55 0.17 262);

  /* ---- Color: status ---- */
  --ok: oklch(0.5 0.11 158);
  --ok-soft: oklch(0.95 0.035 158);
  --warn: oklch(0.52 0.12 70);
  --warn-soft: oklch(0.96 0.045 85);
  --danger: oklch(0.52 0.17 27);
  --danger-soft: oklch(0.95 0.03 27);
  --info: var(--accent);
  --info-soft: var(--accent-soft);

  /* ---- Grain gradient (marketing backdrops) ---- */
  --grain-blue: oklch(0.62 0.14 263);
  --grain-blue-deep: oklch(0.5 0.15 266);
  --grain-mint: oklch(0.86 0.085 168);
  --grain-sky: oklch(0.79 0.085 232);

  /* ---- Elevation (used sparingly: popovers, drawers) ---- */
  --shadow-pop: 0 1px 2px oklch(0.2 0.02 262 / 0.08), 0 12px 32px -8px oklch(0.2 0.02 262 / 0.22);
  --shadow-shot: 0 30px 80px -30px oklch(0.2 0.05 262 / 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* quint */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --meta-w: 320px;
  --page-max: 1240px;
  --reader-max: 68ch;

  /* ---- Z ---- */
  --z-sticky: 10;
  --z-drawer: 40;
  --z-palette: 50;
  --z-toast: 60;

  /* avatar tint lightness (flips in dark) */
  --av-bg-l: 0.9;
  --av-fg-l: 0.32;
}

/* Dark theme — system preference unless user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: oklch(0.17 0.008 262);
    --surface: oklch(0.2 0.009 262);
    --surface-2: oklch(0.235 0.01 262);
    --surface-3: oklch(0.27 0.011 262);
    --line: oklch(0.29 0.01 262);
    --line-strong: oklch(0.38 0.012 262);
    --ink: oklch(0.95 0.005 262);
    --ink-2: oklch(0.8 0.01 262);
    --ink-3: oklch(0.7 0.012 262);
    --ink-inverse: oklch(0.18 0.01 262);
    --night: oklch(0.13 0.008 262);
    --night-2: oklch(0.18 0.009 262);
    --night-3: oklch(0.23 0.01 262);
    --night-line: oklch(0.26 0.01 262);
    --accent: oklch(0.7 0.13 262);
    --accent-hover: oklch(0.76 0.12 262);
    --on-accent: oklch(0.18 0.02 262);
    --accent-soft: oklch(0.3 0.06 262);
    --accent-ink: oklch(0.85 0.08 262);
    --highlight: oklch(0.42 0.09 262 / 0.6);
    --focus: oklch(0.72 0.14 262);
    --ok: oklch(0.74 0.12 158);
    --ok-soft: oklch(0.28 0.04 158);
    --warn: oklch(0.8 0.12 80);
    --warn-soft: oklch(0.3 0.045 80);
    --danger: oklch(0.72 0.15 27);
    --danger-soft: oklch(0.3 0.05 27);
    --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 32px -8px oklch(0 0 0 / 0.6);
    --av-bg-l: 0.36;
    --av-fg-l: 0.92;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(0.17 0.008 262);
  --surface: oklch(0.2 0.009 262);
  --surface-2: oklch(0.235 0.01 262);
  --surface-3: oklch(0.27 0.011 262);
  --line: oklch(0.29 0.01 262);
  --line-strong: oklch(0.38 0.012 262);
  --ink: oklch(0.95 0.005 262);
  --ink-2: oklch(0.8 0.01 262);
  --ink-3: oklch(0.7 0.012 262);
  --ink-inverse: oklch(0.18 0.01 262);
  --night: oklch(0.13 0.008 262);
  --night-2: oklch(0.18 0.009 262);
  --night-3: oklch(0.23 0.01 262);
  --night-line: oklch(0.26 0.01 262);
  --accent: oklch(0.7 0.13 262);
  --accent-hover: oklch(0.76 0.12 262);
  --on-accent: oklch(0.18 0.02 262);
  --accent-soft: oklch(0.3 0.06 262);
  --accent-ink: oklch(0.85 0.08 262);
  --highlight: oklch(0.42 0.09 262 / 0.6);
  --focus: oklch(0.72 0.14 262);
  --ok: oklch(0.74 0.12 158);
  --ok-soft: oklch(0.28 0.04 158);
  --warn: oklch(0.8 0.12 80);
  --warn-soft: oklch(0.3 0.045 80);
  --danger: oklch(0.72 0.15 27);
  --danger-soft: oklch(0.3 0.05 27);
  --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 32px -8px oklch(0 0 0 / 0.6);
  --av-bg-l: 0.36;
  --av-fg-l: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}