/* ============================================================
   TOMISLAV BUZA — Umbrella Design System
   Tokens: colors, type, spacing, motion, elevation
   ============================================================ */

/* Fonts are self-hosted — see assets/fonts/fonts.css (enqueued separately).
   No external @import: faster + GDPR-safe (no Google round-trip). */

:root {
  /* ---- Type families ---- */
  --font-display: 'Instrument Serif', 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Type scale (editorial hierarchy) ---- */
  --fs-hero: clamp(3rem, 7vw, 6.5rem);
  --fs-display: clamp(2.25rem, 4.5vw, 4rem);
  --fs-h1: clamp(1.875rem, 3vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.08em;
  --tracking-mega: 0.18em;

  /* ---- Spacing (8px + editorial wide) ---- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---- Radius ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-deliberate: 720ms;

  /* ---- Elevation (soft, editorial) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 10, 12, 0.04);
  --shadow-md: 0 2px 8px rgba(10, 10, 12, 0.06), 0 1px 2px rgba(10, 10, 12, 0.04);
  --shadow-lg: 0 12px 40px rgba(10, 10, 12, 0.08), 0 2px 8px rgba(10, 10, 12, 0.04);
  --shadow-glow: 0 0 0 1px var(--accent-weak), 0 0 24px var(--accent-glow);
}

/* ============================================================
   LIGHT MODE — paper, ink, one signal accent
   ============================================================ */
:root, [data-theme="light"] {
  --bg: #F7F6F2;           /* warm paper */
  --bg-raised: #FDFCF9;
  --bg-sunken: #EFEDE7;
  --bg-inverse: #0B0B0D;

  --ink: #0B0B0D;          /* deep ink */
  --ink-2: #1F1F22;
  --ink-3: #4A4A50;        /* body secondary */
  --ink-4: #76767E;        /* meta */
  --ink-5: #B4B4BC;        /* disabled */
  --ink-inverse: #F7F6F2;

  --line: #E2DFD7;         /* hairline */
  --line-2: #D0CCC1;
  --line-strong: #0B0B0D;

  /* Signal accent — can be swapped via tweaks */
  --accent: #FF5B2E;       /* signal orange */
  --accent-ink: #FFFFFF;
  --accent-weak: rgba(255, 91, 46, 0.18);
  --accent-glow: rgba(255, 91, 46, 0.28);
  --accent-tint: #FFEFE8;

  /* Status */
  --ok: #0E7A4F;
  --warn: #A66B00;
  --err: #B3261E;
  --info: #0F5FB3;

  /* Chart palette */
  --c1: #0B0B0D;
  --c2: #FF5B2E;
  --c3: #0F5FB3;
  --c4: #0E7A4F;
  --c5: #76767E;
  --c6: #A66B00;

  color-scheme: light;
}

/* ============================================================
   DARK MODE — midnight, signal-glow, web3 layer
   ============================================================ */
[data-theme="dark"] {
  --bg: #0A0B0E;           /* near black */
  --bg-raised: #111216;
  --bg-sunken: #06070A;
  --bg-inverse: #F7F6F2;

  --ink: #F4F3EE;
  --ink-2: #E1E0DB;
  --ink-3: #9A9A9F;
  --ink-4: #6B6B70;
  --ink-5: #3C3C42;
  --ink-inverse: #0A0B0E;

  --line: #20212A;
  --line-2: #2E2F3A;
  --line-strong: #F4F3EE;

  --accent: #FF7A4D;
  --accent-ink: #0A0B0E;
  --accent-weak: rgba(255, 122, 77, 0.16);
  --accent-glow: rgba(255, 122, 77, 0.45);
  --accent-tint: rgba(255, 122, 77, 0.08);

  --ok: #32D39A;
  --warn: #E8B54A;
  --err: #FF5A63;
  --info: #5AA8FF;

  --c1: #F4F3EE;
  --c2: #FF7A4D;
  --c3: #5AA8FF;
  --c4: #32D39A;
  --c5: #9A9A9F;
  --c6: #E8B54A;

  color-scheme: dark;
}

/* Density modes */
[data-density="comfortable"] {
  --s-row: 14px;
  --s-pad: 20px;
}
[data-density="compact"] {
  --s-row: 8px;
  --s-pad: 12px;
}
[data-density="spacious"] {
  --s-row: 20px;
  --s-pad: 32px;
}

/* ============================================================
   RESET + BASELINE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

::selection { background: var(--ink); color: var(--bg); }

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Scanline overlay — toggleable */
body[data-scanlines="true"]::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 3px
  );
  z-index: 9998;
  mix-blend-mode: multiply;
}
[data-theme="dark"] body[data-scanlines="true"]::after,
body[data-theme="dark"][data-scanlines="true"]::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.025) 2px,
    rgba(255, 255, 255, 0.025) 3px
  );
  mix-blend-mode: screen;
}