/* ==========================================================================
   Octatail design tokens — monochrome, dark-first, light parity.

   Principle: luminance encodes priority. The brightest thing on a screen is
   the thing to act on; everything else steps down the grey ramp. There is no
   hue in the system — status is carried by fill, shape and contrast.
   ========================================================================== */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --fs-micro: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --fs-display: 60px;

  /* Radii — technical, not bubbly */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: 999px;

  /* Spacing (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 110ms;
  --dur-2: 180ms;
  --dur-3: 320ms;
  --dur-4: 700ms;

  /* Layout */
  --sidebar-w: 236px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
  --content-max: 1520px;
  --gutter: 28px;
  --drawer-w: 620px;
}

/* --- Dark (default) ------------------------------------------------------ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #050505;
  --sidebar-bg: #090909;
  --surface-1: #0c0c0c;
  --surface-2: #121212;
  --surface-3: #181818;
  --surface-4: #202020;
  --surface-5: #2a2a2a;
  --scrim: rgba(0, 0, 0, 0.62);

  --line-1: rgba(255, 255, 255, 0.065);
  --line-2: rgba(255, 255, 255, 0.1);
  --line-3: rgba(255, 255, 255, 0.16);
  --line-4: rgba(255, 255, 255, 0.28);

  --fg-1: #f3f3f3;
  --fg-2: #a3a3a3;
  --fg-3: #6b6b6b;
  --fg-4: #454545;

  --inv-bg: #f3f3f3;
  --inv-fg: #0a0a0a;
  --inv-hover: #ffffff;

  --glow: rgba(255, 255, 255, 0.07);
  --focus: rgba(255, 255, 255, 0.55);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 18px 50px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-drawer: -24px 0 60px rgba(0, 0, 0, 0.55);

  /* Data-viz ramp: viz-1 carries the signal, viz-5 is background structure */
  --viz-1: #f3f3f3;
  --viz-2: #b3b3b3;
  --viz-3: #7a7a7a;
  --viz-4: #4a4a4a;
  --viz-5: #2b2b2b;
  --viz-6: #1a1a1a;
  --viz-grid: rgba(255, 255, 255, 0.055);
  --viz-axis: rgba(255, 255, 255, 0.14);
  --viz-fill-top: rgba(255, 255, 255, 0.2);
  --viz-fill-bottom: rgba(255, 255, 255, 0);

  --grid-dot: rgba(255, 255, 255, 0.07);
  --skeleton-a: #111111;
  --skeleton-b: #1a1a1a;

  /* Site logos are drawn for white pages: a light tile keeps them legible, a
     touch dimmer than white so the tile never outshines the data. */
  --logo-tile: #dedede;
}

/* --- Light ---------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #f8f8f8;
  --sidebar-bg: #f2f2f2;
  --surface-1: #ffffff;
  --surface-2: #f6f6f6;
  --surface-3: #efefef;
  --surface-4: #e8e8e8;
  --surface-5: #dddddd;
  --scrim: rgba(10, 10, 10, 0.32);

  --line-1: rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.1);
  --line-3: rgba(0, 0, 0, 0.16);
  --line-4: rgba(0, 0, 0, 0.3);

  --fg-1: #0a0a0a;
  --fg-2: #555555;
  --fg-3: #8a8a8a;
  --fg-4: #bdbdbd;

  --inv-bg: #0a0a0a;
  --inv-fg: #fafafa;
  --inv-hover: #262626;

  --glow: rgba(0, 0, 0, 0.06);
  --focus: rgba(0, 0, 0, 0.5);
  --highlight: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-drawer: -24px 0 60px rgba(0, 0, 0, 0.12);

  --viz-1: #0a0a0a;
  --viz-2: #5c5c5c;
  --viz-3: #8f8f8f;
  --viz-4: #bcbcbc;
  --viz-5: #dcdcdc;
  --viz-6: #ececec;
  --viz-grid: rgba(0, 0, 0, 0.06);
  --viz-axis: rgba(0, 0, 0, 0.16);
  --viz-fill-top: rgba(0, 0, 0, 0.13);
  --viz-fill-bottom: rgba(0, 0, 0, 0);

  --grid-dot: rgba(0, 0, 0, 0.075);
  --skeleton-a: #eeeeee;
  --skeleton-b: #f6f6f6;

  --logo-tile: #ffffff;
}