/* LondonICT RMM — design tokens
   Mood: Quiet futurism. Phosphor accent.
   Two themes, equal-citizen. OKLCH throughout.
*/

:root {
  /* type */
  --font-sans: "Geist", "Söhne", ui-sans-serif, -apple-system, sans-serif;
  --font-display: "Geist", "Söhne", ui-sans-serif, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale — designed for 14px operational base */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-display: 72px;

  /* letter-spacing */
  --ls-tight: -0.02em;
  --ls-micro: 0.08em;   /* micro caps */
  --ls-label: 0.04em;

  /* weights */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 560;
  --fw-bold: 640;

  /* line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

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

  /* radius */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-full: 999px;

  /* density (overridden by tweak) */
  --row-h: 34px;
  --control-h: 30px;
  --gutter: 14px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;

  /* semantic — set per theme below */
}

/* DARK — "quiet futurism" default */
[data-theme="dark"] {
  --bg-0: oklch(14% 0.005 240);           /* deepest — app bg */
  --bg-1: oklch(16% 0.005 240);           /* surface */
  --bg-2: oklch(19% 0.006 240);           /* card */
  --bg-3: oklch(23% 0.007 240);           /* elevated */
  --bg-4: oklch(28% 0.008 240);           /* hover */
  --bg-scrim: oklch(8% 0.005 240 / 0.7);

  --fg-0: oklch(97% 0.006 240);           /* primary text */
  --fg-1: oklch(82% 0.008 240);           /* secondary */
  --fg-2: oklch(60% 0.01 240);            /* tertiary / labels */
  --fg-3: oklch(44% 0.008 240);           /* quaternary / placeholders */
  --fg-4: oklch(32% 0.006 240);           /* disabled */

  --border-0: oklch(24% 0.008 240);
  --border-1: oklch(30% 0.01 240);
  --border-strong: oklch(42% 0.012 240);

  /* phosphor accent */
  --accent-h: 172;
  --accent: oklch(78% 0.14 var(--accent-h));
  --accent-dim: oklch(62% 0.12 var(--accent-h));
  --accent-glow: oklch(78% 0.14 var(--accent-h) / 0.18);
  --accent-ink: oklch(14% 0.02 var(--accent-h));

  /* semantic signals */
  --ok: oklch(78% 0.14 155);
  --ok-dim: oklch(58% 0.11 155);
  --warn: oklch(82% 0.14 75);
  --warn-dim: oklch(62% 0.12 75);
  --crit: oklch(70% 0.19 25);
  --crit-dim: oklch(55% 0.16 25);
  --info: oklch(76% 0.12 240);
  --trans: oklch(72% 0.15 300);

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3), 0 0 0 1px oklch(0% 0 0 / 0.2) inset;
  --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.45);
  --shadow-3: 0 24px 64px oklch(0% 0 0 / 0.6);
  --glow-accent: 0 0 0 1px var(--accent-glow), 0 0 24px var(--accent-glow);

  color-scheme: dark;
}

/* LIGHT — warm near-white, equal-citizen */
[data-theme="light"] {
  --bg-0: oklch(98.5% 0.003 80);
  --bg-1: oklch(97% 0.003 80);
  --bg-2: oklch(99% 0.002 80);
  --bg-3: oklch(95% 0.004 80);
  --bg-4: oklch(92% 0.005 80);
  --bg-scrim: oklch(20% 0.01 80 / 0.25);

  --fg-0: oklch(18% 0.01 240);
  --fg-1: oklch(32% 0.012 240);
  --fg-2: oklch(48% 0.01 240);
  --fg-3: oklch(60% 0.008 240);
  --fg-4: oklch(72% 0.006 240);

  --border-0: oklch(90% 0.006 240);
  --border-1: oklch(85% 0.008 240);
  --border-strong: oklch(70% 0.01 240);

  --accent-h: 172;
  --accent: oklch(50% 0.14 var(--accent-h));
  --accent-dim: oklch(62% 0.12 var(--accent-h));
  --accent-glow: oklch(50% 0.14 var(--accent-h) / 0.12);
  --accent-ink: oklch(98% 0.006 var(--accent-h));

  --ok: oklch(52% 0.14 155);
  --ok-dim: oklch(68% 0.11 155);
  --warn: oklch(62% 0.14 75);
  --warn-dim: oklch(78% 0.12 75);
  --crit: oklch(55% 0.19 25);
  --crit-dim: oklch(70% 0.16 25);
  --info: oklch(50% 0.12 240);
  --trans: oklch(55% 0.15 300);

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.04);
  --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.08);
  --shadow-3: 0 24px 64px oklch(0% 0 0 / 0.12);
  --glow-accent: 0 0 0 1px var(--accent-glow);

  color-scheme: light;
}

/* density modes */
[data-density="compact"] {
  --row-h: 28px;
  --control-h: 26px;
  --gutter: 10px;
}
[data-density="cozy"] {
  --row-h: 34px;
  --control-h: 30px;
  --gutter: 14px;
}
[data-density="comfortable"] {
  --row-h: 42px;
  --control-h: 36px;
  --gutter: 20px;
}

/* reduced motion global */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* reset + base */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  background: var(--bg-0);
  color: var(--fg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "tnum";
}
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-glow); color: var(--fg-0); }

/* scrollbars — minimal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 999px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* utility */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.caps { text-transform: uppercase; letter-spacing: var(--ls-micro); font-size: var(--fs-xs); color: var(--fg-2); font-weight: var(--fw-med); }
.tnum { font-variant-numeric: tabular-nums; }

/* focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* phosphor scanline texture — optional, used on hero surfaces */
.phosphor-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, oklch(0% 0 0 / 0.04) 2px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* micro grid bg */
.grid-bg {
  background-image:
    linear-gradient(var(--border-0) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-0) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* blinking cursor / heartbeat */
@keyframes heartbeat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.heartbeat { animation: heartbeat 2s ease-in-out infinite; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.pulse-ring { animation: pulse-ring 2s ease-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* font-pairing overrides via tweak */
[data-typeset="editorial"] {
  --font-sans: "Söhne", "Geist", ui-sans-serif, sans-serif;
  --font-display: "Söhne", "Geist", ui-sans-serif, sans-serif;
}
[data-typeset="technical"] {
  --font-sans: "Geist", ui-sans-serif, sans-serif;
  --font-display: "Geist", ui-sans-serif, sans-serif;
}
[data-typeset="humanist"] {
  --font-sans: "IBM Plex Sans", "Geist", ui-sans-serif, sans-serif;
  --font-display: "IBM Plex Sans", "Geist", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", "Geist Mono", ui-monospace, monospace;
}
[data-typeset="fraunces-mix"] {
  --font-display: "Fraunces", "Geist", serif;
}