/* ═══════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO — Oriol Romaní
   Generado: 2026-04-09
   Stack: HTML + CSS + JS vanilla
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ─── COLORES PRINCIPALES ──────────────────────────────── */
  --color-primary:       #0F1C2E;   /* Navy oscuro — fondo principal */
  --color-primary-dark:  #08111D;   /* Navy más oscuro — hover/activo */
  --color-primary-light: #1A2D47;   /* Navy más claro — superficies */

  --color-accent:        #C9A227;   /* Oro jazz */
  --color-accent-dark:   #A37D1A;   /* Oro hover */
  --color-accent-light:  #E4C55A;   /* Oro suave */
  --color-accent-muted:  #C9A22720; /* Oro translúcido — fondos */

  /* ─── FONDOS Y SUPERFICIES ─────────────────────────────── */
  --color-bg:        #0F1C2E;       /* Fondo global */
  --color-surface:   #1A2D47;       /* Tarjetas, secciones elevadas */
  --color-surface-2: #243A5A;       /* Secciones alternativas */
  --color-surface-3: #0B1525;       /* Secciones más oscuras */

  /* ─── TEXTO ─────────────────────────────────────────────── */
  --color-text:           #F0EAD6;  /* Crema cálido — texto principal */
  --color-text-secondary: #C4B99A;  /* Beige dorado — subtítulos */
  --color-text-muted:     #7A8FA6;  /* Azul grisáceo — textos secundarios */
  --color-text-inverse:   #0F1C2E;  /* Para textos sobre fondo claro */

  /* ─── BORDES ────────────────────────────────────────────── */
  --color-border:       #2D4263;    /* Borde estándar */
  --color-border-light: #1E3350;    /* Borde sutil */
  --color-border-accent:#C9A22740;  /* Borde dorado translúcido */

  /* ─── ESTADOS ───────────────────────────────────────────── */
  --color-success: #22c55e;
  --color-error:   #ef4444;
  --color-warning: #f59e0b;

  /* ─── OVERLAY ───────────────────────────────────────────── */
  --color-overlay: rgba(8, 17, 29, 0.75);

  /* ─── TIPOGRAFÍA ────────────────────────────────────────── */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', monospace;

  /* Escala tipográfica */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Pesos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Interlineado */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-base:    0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ─── ESPACIADO ─────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --container-padding: var(--space-6);
  --section-padding-y: var(--space-24);

  /* ─── BORDES / RADIO ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ─── SOMBRAS ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3),  0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 8px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 20px rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.3);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.3);
  --shadow-accent: 0 0 20px rgba(201,162,39,.25);
  --shadow-inset: inset 0 2px 8px rgba(0,0,0,.3);

  /* ─── TRANSICIONES ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX ───────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ─── GRADIENTES ────────────────────────────────────────── */
  --gradient-hero:    linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  --gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-primary) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(15,28,46,.3) 0%, rgba(15,28,46,.85) 100%);
}

/* ─── BREAKPOINTS (referencia) ────────────────────────────
   mobile:  < 640px  (default — mobile first)
   tablet:  ≥ 768px  @media (min-width: 768px)
   desktop: ≥ 1024px @media (min-width: 1024px)
   wide:    ≥ 1280px @media (min-width: 1280px)
   ────────────────────────────────────────────────────────── */