/* ODDAY design tokens - Neon Pixel Terminal
   Layer 1 primitive -> Layer 2 semantic -> Layer 3 component.
   No component may use a literal colour, font-family or timing value. */

:root {
  /* ---------- 1. primitive ---------- */
  --c-void: #05080F;
  --c-deep: #0A0F1A;
  --c-well: #111A2B;
  --c-rule: #1E2C42;
  --c-paper: #E9F3FF;
  --c-paper-2: #A9BBD4;
  --c-paper-3: #6F819B;
  --c-cyan: #2EE7FF;
  --c-magenta: #FF2E94;
  --c-blue: #2E93FF;

  --f-display: "Oxanium", "Segoe UI", system-ui, sans-serif;
  --f-body: "Oxanium", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Kode Mono", ui-monospace, "Consolas", monospace;

  --s-3xs: 2px;
  --s-2xs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 40px;
  --s-2xl: 64px;
  --s-3xl: 96px;
  --s-4xl: 144px;
  --s-5xl: 192px;

  --r-none: 0px;
  --r-input: 2px;

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.6, 0, 0.9, 0.3);

  /* ---------- 2. semantic ---------- */
  --color-bg: var(--c-void);
  --color-surface: var(--c-deep);
  --color-well: var(--c-well);
  --color-rule: var(--c-rule);
  --color-ink: var(--c-paper);
  --color-ink-2: var(--c-paper-2);
  --color-ink-3: var(--c-paper-3);
  --color-signal: var(--c-cyan);
  --color-state: var(--c-magenta);
  --color-link: var(--c-blue);
  --color-focus: var(--c-cyan);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.75rem, 3vw, 2.5rem);
  --text-display: clamp(2.5rem, 6vw, 5rem);

  --leading-display: 1.04;
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --measure: 65ch;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 10vw, 144px);

  --texture-opacity: 0.05;
  --scanline: rgba(233, 243, 255, var(--texture-opacity));

  /* ---------- 3. component ---------- */
  --btn-bg: var(--color-signal);
  --btn-ink: #04222B;
  --btn-border: var(--color-ink);
  --btn-shadow: 2px 2px 0 var(--color-ink);
  --btn-height: 48px;

  --input-bg: var(--color-well);
  --input-border: var(--color-rule);
  --input-ink: var(--color-ink);
  --input-height: 48px;

  --nav-height: 64px;
  --stamp-ink: var(--color-signal);
}

/* scanline overlay: one artifact family, static, never over running text */
.odday-scanlines::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(
    transparent 0 2px,
    var(--scanline) 2px 3px
  );
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}