/* ============================================================
   Cyber-Flora design tokens
   Ported from ~/tsvetok/apps/TsvetokCore/Sources/TsvetokTheme/
     - Colors.swift     (commit ba71a2b — token deltas materialized)
     - Typography.swift
   Single source of truth for the /tsvetok page.
   The / root page consumes only the typography subset.
   ============================================================ */

:root {
  /* ---------- Backgrounds (dark surface stack) ---------- */
  --deep-void:     #05080A;
  --panel-dark:    #0B1219;
  --panel-hover:   #111A24;
  --panel-active:  #162230;
  --code-bg:       #0F1620;

  /* ---------- Gold tier (primary accent) ---------- */
  --neon-gold:        #FFD700;  /* borders, fine details, ≤22pt */
  --neon-gold-warm:   #F2C24A;  /* larger fills, ≥28pt — accessibility-tuned */
  --neon-gold-dim:    #B8A000;
  --neon-gold-glow:   rgba(255, 215, 0, 0.5);
  --neon-gold-subtle: rgba(255, 215, 0, 0.1);

  /* ---------- Secondary accents ---------- */
  --neon-cyan:        #00F0FF;
  --neon-cyan-glow:   rgba(0, 240, 255, 0.5);
  --neon-cyan-subtle: rgba(0, 240, 255, 0.1);
  --accent-violet:    #A07AFF;
  --glitch-red:       #FF0040;  /* decorative-only — NOT for errors */

  /* ---------- Status (semantic) ---------- */
  --status-success: #34D88E;    /* shifted from #00FF88 for accessibility */
  --status-warning: #FFAA00;
  --status-error:   #FF4466;    /* use for errors, not --glitch-red */

  /* ---------- Text ---------- */
  --text-primary:   #FFFFFF;
  --text-secondary: #A0AAB5;
  --text-muted:     #7A848F;

  /* ---------- Border tier (opacity-stepped off --neon-gold) ---------- */
  --cyber-border:          rgba(255, 215, 0, 0.50);
  --cyber-border-hairline: rgba(255, 215, 0, 0.24);
  --cyber-border-focus:    rgba(255, 215, 0, 0.65);

  /* ---------- Gradients ---------- */
  --gold-warm-gradient: linear-gradient(135deg, #F2C24A 0%, rgba(242, 194, 74, 0.7) 100%);

  /* ---------- Type families ---------- */
  --font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-prose:   "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* ---------- Type scale (pt → px @ 1.333) ----------
     Strict — do not interpolate sizes outside these. */
  --type-display-xl: 45px; /* Orbitron 34pt */
  --type-display-l:  37px; /* Orbitron 28pt */
  --type-display-m:  32px; /* Orbitron 24pt */
  --type-display-s:  27px; /* Orbitron 20pt */
  --type-display-xs: 23px; /* Orbitron 17pt — floor: ≥13pt rendering */
  --type-display-xxs:20px; /* Orbitron 15pt */

  --type-body-l: 23px;  /* 17pt */
  --type-body-m: 20px;  /* 15pt */
  --type-body-s: 17px;  /* 13pt */

  --type-label-m: 20px; /* Fira Code Medium 15pt */
  --type-label-s: 17px; /* 13pt */
  --type-label-xs:15px; /* 11pt */

  /* ---------- Layout ---------- */
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 48px);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 140ms;
  --dur-base:  220ms;
}

/* ---------- Root-page (/) neutral subset ----------
   Light surface. Type-only continuity hook from Cyber-Flora.
   No dark backgrounds, no neon palette, no gold borders. */
:root {
  --root-bg:       #F6F4EF;       /* paper */
  --root-surface:  #FFFFFF;
  --root-ink:      #15171A;
  --root-ink-soft: #4A5058;
  --root-ink-mute: #6E747A;
  --root-rule:     rgba(21, 23, 26, 0.12);
  --root-accent:   #8A7800;       /* gold-dim — single neon signal, used hairline only */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}