/* =============================================================
   FIELD NOTES — Design tokens for the Algorithm Visualizer
   Two themes: paper (warm light) + night (deep dark)
   ============================================================= */

:root {
  /* Type stack */
  --font-display: "Fraunces", "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (px-based, modest scale 1.2) */
  --t-micro: 10px;
  --t-caption: 11px;
  --t-small: 12px;
  --t-body: 14px;
  --t-base: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 24px;
  --t-3xl: 32px;
  --t-4xl: 44px;
  --t-display: 64px;

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px;
  --s-10: 64px; --s-11: 80px;

  /* Radii — minimal, mostly square */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Hairlines */
  --hairline: 1px;
  --rule: 1px;

  /* Easings */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- PAPER (light) ---------- */
:root,
[data-theme="paper"] {
  /* Surfaces — warm off-white, like aged paper */
  --bg: #f3eee3;
  --bg-tint: #ece5d4;
  --surface: #f8f4ea;
  --surface-2: #ffffff;
  --surface-sunken: #e8e1cd;

  /* Ink */
  --ink: #1a1612;
  --ink-2: #3a342b;
  --ink-3: #6b6457;
  --ink-4: #9a9384;
  --ink-5: #b9b2a1;

  /* Rules & dividers */
  --rule-strong: #1a1612;
  --rule-soft: #c8bfa9;
  --rule-faint: #ddd4be;
  --grid-dot: rgba(26, 22, 18, 0.18);

  /* Accent (vermillion) — the only strong color, used sparingly */
  --accent: #c2412a;
  --accent-soft: #e07a5f;
  --accent-hover: #a8341e;

  /* Role colors — algorithm highlights */
  --role-compare: #c08a2e;   /* ochre */
  --role-swap: #c2412a;      /* vermillion */
  --role-pivot: #5a4fa0;     /* indigo */
  --role-sorted: #4a7c59;    /* moss */
  --role-eliminated: #b9b2a1;
  --role-found: #4a7c59;
  --role-default: #2a3f5f;   /* prussian */

  /* Code view */
  --code-bg: #f8f4ea;
  --code-gutter: #ddd4be;
  --code-keyword: #5a4fa0;
  --code-string: #4a7c59;
  --code-number: #c2412a;
  --code-comment: #9a9384;
  --code-builtin: #2a3f5f;
  --code-active-line: rgba(192, 138, 46, 0.14);
  --code-active-gutter: #c08a2e;

  /* Shadows — virtually nonexistent, just a hairline */
  --shadow-1: 0 1px 0 rgba(26, 22, 18, 0.06);
  --shadow-card: 0 0 0 1px var(--rule-soft);
  --shadow-lift: 0 1px 0 rgba(26, 22, 18, 0.08), 0 8px 24px -12px rgba(26, 22, 18, 0.18);

  color-scheme: light;
}

/* ---------- NIGHT (dark) ---------- */
[data-theme="night"] {
  --bg: #0e0d0c;
  --bg-tint: #161412;
  --surface: #14110f;
  --surface-2: #1c1916;
  --surface-sunken: #0a0908;

  --ink: #f1ead8;
  --ink-2: #d6cfbe;
  --ink-3: #948c79;
  --ink-4: #6b6457;
  --ink-5: #4a443b;

  --rule-strong: #f1ead8;
  --rule-soft: #2c2823;
  --rule-faint: #211e1a;
  --grid-dot: rgba(241, 234, 216, 0.10);

  --accent: #e07a5f;
  --accent-soft: #f0a587;
  --accent-hover: #f0a587;

  --role-compare: #e3b261;
  --role-swap: #e07a5f;
  --role-pivot: #b6a8ff;
  --role-sorted: #87c19a;
  --role-eliminated: #4a443b;
  --role-found: #87c19a;
  --role-default: #7eb1ff;

  --code-bg: #14110f;
  --code-gutter: #2c2823;
  --code-keyword: #b6a8ff;
  --code-string: #87c19a;
  --code-number: #e07a5f;
  --code-comment: #6b6457;
  --code-builtin: #7eb1ff;
  --code-active-line: rgba(227, 178, 97, 0.10);
  --code-active-gutter: #e3b261;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.6);
  --shadow-card: 0 0 0 1px var(--rule-soft);
  --shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Reusable primitives ---------- */
.dot-grid {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}

.hairline-grid {
  background-image:
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-faint) 1px, transparent 1px);
  background-size: 24px 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.serif {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "ss02", "lnum";
  font-optical-sizing: auto;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "zero", "ss01";
}

.rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 0;
}

.rule-strong {
  border-top-color: var(--rule-strong);
}

/* ---------- Hide scrollbars on canvas children but keep functional ---------- */
.subtle-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.subtle-scroll::-webkit-scrollbar-track { background: transparent; }
.subtle-scroll::-webkit-scrollbar-thumb {
  background: var(--rule-soft);
  border-radius: var(--r-pill);
}
.subtle-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }