/* ============================================================
   cerberus — design tokens
   The single source of truth for the visual language.
   Everything else (base.css, components.css) consumes these.
   ============================================================ */

:root {
  /* ---- Surfaces (darkest → lightest) ---------------------- */
  --bg:            #0A0C0F;  /* page background                */
  --bg-elevated:   #0D1117;  /* alternating section band      */
  --surface:       #11151B;  /* default card                  */
  --surface-2:     #10141A;  /* inset panel / req bar         */
  --surface-3:     #161C24;  /* nested box (arch flow)        */
  --code-bg:       #08090C;  /* terminal / code block         */

  /* ---- Borders -------------------------------------------- */
  --border:        #1A2029;  /* hairline section divider      */
  --border-2:      #20272F;  /* card border                   */
  --border-3:      #2A323D;  /* interactive / button border   */
  --border-card:   #283039;  /* arch flow box border          */
  --border-faint:  #1C232C;  /* chip border                   */
  --border-inner:  #1A222B;  /* in-card divider               */

  /* ---- Text ----------------------------------------------- */
  --text:          #F2F5F9;  /* headings                      */
  --text-2:        #E7EBF1;  /* strong body / on-dark         */
  --text-muted:    #A2ABB8;  /* lead paragraphs               */
  --text-dim:      #8893A4;  /* card body                     */
  --text-faint:    #828B98;  /* captions / meta (AA ≥4.5:1)   */
  --text-fainter:  #737D8B;  /* code comments / filenames (AA) */

  /* ---- Brand + signal accents ----------------------------- */
  --accent:        #7C8CFF;  /* indigo — brand, the "node"    */
  --accent-soft:   #AAB4FF;  /* indigo tint (feature icons)   */
  --accent-deep:   #38406B;  /* indigo border on tinted box   */
  --sky:           #38BDF8;  /* PromQL                        */
  --emerald:       #34D399;  /* LogQL                         */
  --rose:          #FB7185;  /* TraceQL                       */
  --mint:          #9FE7C6;  /* positive / status text        */
  --code-var:      #7DD3FC;  /* env-var highlight in code     */

  /* tinted fills (used behind icons / boxes) */
  --accent-fill:   rgba(124,140,255,.08);
  --accent-fill-2: rgba(124,140,255,.10);
  --accent-ring:   rgba(124,140,255,.28);
  --sky-fill:      rgba(56,189,248,.10);
  --sky-ring:      rgba(56,189,248,.28);
  --emerald-fill:  rgba(52,211,153,.10);
  --emerald-ring:  rgba(52,211,153,.28);
  --rose-fill:     rgba(251,113,133,.10);
  --rose-ring:     rgba(251,113,133,.28);

  /* glow radial used in hero / cta */
  --glow:          radial-gradient(ellipse at center, rgba(124,140,255,.16), rgba(124,140,255,0) 70%);

  /* ---- Typography ----------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid type scale (clamp: min, preferred, max) */
  --fs-hero:    clamp(40px, 6.4vw, 82px);
  --fs-h2:      clamp(28px, 3.6vw, 44px);
  --fs-h2-cta:  clamp(28px, 4vw,   46px);
  --fs-lead:    clamp(17px, 2vw,   21px);
  --fs-body:    18px;
  --fs-sm:      15px;
  --fs-xs:      14px;
  --fs-eyebrow: 13px;
  --fs-mono-sm: 13.5px;

  --tracking-tight: -.03em;
  --tracking-h2:    -.02em;
  --tracking-snug:  -.01em;

  /* ---- Radii ---------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   18px;
  --r-2xl:  22px;
  --r-pill: 999px;

  /* ---- Layout --------------------------------------------- */
  --container:  1200px;
  --gutter:     32px;
  --section-y:  110px;   /* default vertical section rhythm   */

  /* ---- Elevation ------------------------------------------ */
  --shadow-accent:  0 8px 30px -8px rgba(124,140,255,.6);
  --shadow-accent-strong: 0 8px 30px -10px rgba(124,140,255,.7);

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
}