/* ==========================================================================
   GRUPO VISION · DESIGN TOKENS
   Base scale: 4px. Single accent: Vision Orange. Monochrome neutrals.
   ========================================================================== */

:root {
  /* Brand */
  --gv-orange-50:  #FFF3EB;
  --gv-orange-100: #FFD9BD;
  --gv-orange-200: #FFB888;
  --gv-orange-300: #FF9656;
  --gv-orange-400: #F88136;
  --gv-orange-500: #F37021;   /* PRIMARY · Vision Orange */
  --gv-orange-600: #D85A12;
  --gv-orange-700: #B0440A;
  --gv-orange-800: #7A2F08;
  --gv-orange-900: #3F1804;

  /* Neutrals (warm-leaning, not pure cool gray) */
  --gv-ink-0:   #FFFFFF;
  --gv-ink-25:  #FAF9F7;
  --gv-ink-50:  #F2F0EC;
  --gv-ink-100: #E4E2DC;
  --gv-ink-200: #C9C5BC;
  --gv-ink-300: #9C988D;
  --gv-ink-400: #6E6A60;
  --gv-ink-500: #4B4842;
  --gv-ink-600: #2F2D29;
  --gv-ink-700: #1F1E1B;
  --gv-ink-800: #141312;
  --gv-ink-900: #0A0A09;
  --gv-ink-1000: #000000;

  /* Status */
  --gv-success: #2FB37C;
  --gv-warning: #F3B221;
  --gv-danger:  #E5484D;
  --gv-info:    #4D8DF0;

  /* Type ramp (clamp() for fluid scale) */
  --fs-display: clamp(56px, 8vw, 128px);
  --fs-h1: clamp(40px, 5vw, 72px);
  --fs-h2: clamp(28px, 3vw, 44px);
  --fs-h3: 24px;
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 0.92;
  --lh-snug: 1.1;
  --lh-base: 1.5;
  --lh-loose: 1.65;

  --ls-tight: -0.04em;
  --ls-snug:  -0.02em;
  --ls-base:  0;
  --ls-wide:  0.08em;
  --ls-mega:  0.18em;

  /* Family */
  --ff-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --ff-text: "Archivo", system-ui, -apple-system, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 144px;

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 6px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05);
  --shadow-3: 0 18px 40px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.08);
  --shadow-glow: 0 0 0 6px rgba(243,112,33,.25);

  /* Layout */
  --topbar-h: 64px;
  --sidenav-w: 264px;
  --content-max: 1280px;
}

/* ----------------------------- DARK THEME ------------------------------ */
[data-theme="dark"] {
  --bg:       var(--gv-ink-1000);
  --bg-elev:  var(--gv-ink-800);
  --bg-elev2: var(--gv-ink-700);
  --bg-tint:  rgba(255,255,255,0.03);
  --line:     rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.06);
  --text:     var(--gv-ink-0);
  --text-mute:var(--gv-ink-200);
  --text-dim: var(--gv-ink-300);
  --on-accent:var(--gv-ink-1000);

  --accent:   var(--gv-orange-500);
  --accent-hi:var(--gv-orange-400);

  /* swatch foreground for tint chips */
  --chip-bg:  rgba(255,255,255,0.06);
  --chip-bg-h:rgba(255,255,255,0.10);
}

/* ----------------------------- LIGHT THEME ----------------------------- */
[data-theme="light"] {
  --bg:       var(--gv-ink-25);
  --bg-elev:  var(--gv-ink-0);
  --bg-elev2: var(--gv-ink-50);
  --bg-tint:  rgba(0,0,0,0.025);
  --line:     rgba(0,0,0,0.10);
  --line-soft:rgba(0,0,0,0.06);
  --text:     var(--gv-ink-900);
  --text-mute:var(--gv-ink-500);
  --text-dim: var(--gv-ink-400);
  --on-accent:var(--gv-ink-0);

  --accent:   var(--gv-orange-500);
  --accent-hi:var(--gv-orange-600);

  --chip-bg:  rgba(0,0,0,0.04);
  --chip-bg-h:rgba(0,0,0,0.08);
}