/* ══════════════════════════════════════════════════════════
   VISIÓN HIRAM — Design Tokens
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Fondos (Navy Dominant — Stitch Official) ───── */
  --color-bg-base:        #1D1F42;
  --color-bg-surface:     #161838;
  --color-bg-elevated:    #252857;
  --color-bg-subtle:      #2e3060;

  /* ── Marca ──────────────────────────────────────── */
  --color-brand-deep:     #1D1F42;
  --color-brand-mid:      #2A2D5E;
  --color-brand-card:     #252857;

  /* ── Acento (Champagne / Arena) ─────────────────── */
  --color-accent:         #E0D6C2;
  --color-accent-bright:  #F0E8D6;
  --color-accent-dim:     #C4B99E;
  --color-accent-gold:    #D4AF37;

  /* ── Texto ──────────────────────────────────────── */
  --color-text-primary:   #FAFAFA;
  --color-text-secondary: #A1A1AA;
  --color-text-tertiary:  #71717A;
  --color-text-disabled:  #3F3F46;

  /* ── Bordes ─────────────────────────────────────── */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong:  rgba(255, 255, 255, 0.18);
  --color-border-accent:  rgba(224, 214, 194, 0.30);

  /* ── Estado ─────────────────────────────────────── */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;

  /* ── Tipografía ─────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Escala tipográfica ─────────────────────────── */
  --text-display:   clamp(72px, 8vw, 120px);
  --text-h1:        clamp(48px, 6vw, 80px);
  --text-h2:        clamp(36px, 4vw, 56px);
  --text-h3:        clamp(24px, 2.5vw, 36px);
  --text-h4:        20px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-small:     14px;
  --text-label:     11px;

  /* ── Espaciado (base 8px) ───────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: 160px;

  /* ── Contenedores ───────────────────────────────── */
  --container-max:     1440px;
  --container-wide:    1280px;
  --container-default: 1100px;
  --container-narrow:   800px;
  --container-text:     640px;
  --side-padding:      clamp(20px, 5vw, 80px);

  /* ── Easing ─────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-ui:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Bordes Glass ───────────────────────────────── */
  --border-glass-subtle:  1px solid rgba(255, 255, 255, 0.05);
  --border-glass-default: 1px solid rgba(255, 255, 255, 0.08);
  --border-glass-hover:   1px solid rgba(255, 255, 255, 0.15);
  --border-glass-accent:  1px solid rgba(224, 214, 194, 0.25);
  --border-glass-strong:  1px solid rgba(255, 255, 255, 0.20);
}