/* ============================================================
   Elvaro Design System — CSS Custom Properties
   Dark-only. Source of truth: design tokens
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --brand-yellow:        #F7B703;
  --brand-yellow-hover:  #FFC313;
  --brand-yellow-press:  #DDA000;
  --brand-yellow-soft:   rgba(247, 183, 3, 0.12);
  --brand-yellow-ring:   rgba(247, 183, 3, 0.35);

  --brand-gold:          #D4A24C;
  --brand-gold-hi:       #E8B85F;
  --brand-gold-lo:       #7A5A1F;

  /* ---------- Surfaces ---------- */
  --bg:                  #0A0E11;
  --surface-1:           #0E1215;
  --surface-2:           #13171A;
  --surface-3:           #171B1F;
  --surface-4:           #1C2126;

  --hairline:            rgba(255, 255, 255, 0.06);
  --hairline-strong:     rgba(255, 255, 255, 0.12);
  --hairline-yellow:     rgba(247, 183, 3, 0.55);

  /* ---------- Foreground ---------- */
  --fg-1:                #FAFAFA;
  --fg-2:                rgba(255, 255, 255, 0.72);
  --fg-3:                rgba(255, 255, 255, 0.48);
  --fg-4:                rgba(255, 255, 255, 0.24);
  --fg-on-yellow:        #0A0E11;

  /* RGB channels for alpha overlays/borders/shadows that must flip with the theme.
     Use as rgba(var(--fg-rgb), .06) / rgba(var(--bg-rgb), .85). Dark values keep
     existing literals exact; light-mode.css inverts them. */
  --fg-rgb:              255, 255, 255;   /* "ink" channel — white on dark */
  --bg-rgb:              10, 14, 17;      /* page-bg channel */

  /* ---------- Semantic ---------- */
  --success:             #22C55E;
  --success-soft:        #0E2B1D;
  --warning:             #F59E0B;
  --warning-soft:        #302510;
  --danger:              #EF4444;
  --danger-soft:         #2F1719;
  --info:                #3B82F6;
  --info-soft:           #122136;

  /* ---------- Condition badges — DS source of truth (solid, no transparency) ----------
     Distinct hues for human scannability: each condition gets
     a clearly different vivid fg hue (8px dots / badge text) + a solid dark ~20% tint of
     the same hue as badge bg (solid equivalent of the 12–16% alpha soft pattern). */
  --cond-new-bg:         #1B2F44;   /* New — vivid azure */
  --cond-new-fg:         #4DA3FF;
  --cond-tested-bg:      #3E361C;   /* Tested — brand-family amber */
  --cond-tested-fg:      #FFC838;
  --cond-refurb-bg:      #163629;   /* Refurbished — emerald */
  --cond-refurb-fg:      #34C77B;
  --cond-broken-bg:      #3E2123;   /* For Parts (Не работает) — signal red */
  --cond-broken-fg:      #FF5D5D;
  --cond-excellent-bg:   #2A2744;   /* Excellent — violet */
  --cond-excellent-fg:   #9B7BFF;
  --cond-good-bg:        #3E2A1D;   /* Good — warm orange */
  --cond-good-fg:        #FF8A3D;

  /* ---------- Typography ---------- */
  --font-display:        'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xl:       96px;
  --fs-display:          72px;
  --fs-h1:               48px;
  --fs-h2:               36px;
  --fs-h3:               28px;
  --fs-h4:               22px;
  --fs-body-lg:          18px;
  --fs-body:             16px;
  --fs-body-sm:          14px;
  --fs-caption:          12px;
  --fs-button:           15px;
  --fs-overline:         12px;

  --lh-tight:            1.05;
  --lh-snug:             1.2;
  --lh-normal:           1.5;
  --lh-relaxed:          1.65;

  --ls-tight:            -0.02em;
  --ls-normal:           0;
  --ls-wide:             0.04em;
  --ls-overline:         0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;

  /* ---------- Radii ---------- */
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           14px;
  --radius-xl:           20px;
  --radius-pill:         999px;

  /* ---------- Shadows ---------- */
  --shadow-card:         0 1px 0 0 rgba(255,255,255,0.04) inset, 0 16px 32px -16px rgba(0,0,0,0.7);
  --shadow-pop:          0 24px 48px -12px rgba(0,0,0,0.85), 0 1px 0 0 rgba(255,255,255,0.06) inset;
  --shadow-yellow-ring:  0 0 0 3px rgba(247,183,3,0.35);
  --shadow-button:       0 1px 0 0 rgba(255,255,255,0.12) inset, 0 6px 14px -8px rgba(0,0,0,0.6);

  /* ---------- Motion ---------- */
  --ease-standard:       cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:            120ms;
  --dur-base:            180ms;
  --dur-slow:            240ms;

  /* ---------- Layout ---------- */
  --container:           1280px;
  --container-wide:      1440px;
  --container-narrow:    680px;
  --gutter-d:            80px;
  --gutter-t:            40px;
  --gutter-m:            24px;
}