/* ═══════════════════════════════════════════════════════
   ODYLIUM — DESIGN TOKENS v2.0
   Estética: Instrumental de Precisión
   Skills: frontend-design + ui-ux-pro-max
   ═══════════════════════════════════════════════════════ */

:root {

  /* ─── TIPOGRAFÍAS ─────────────────────────────────────
     Display: Playfair Display (serifa editorial)
     Body: DM Sans (limpia, neutral, excelente en dark)
     Mono: JetBrains Mono (especificaciones técnicas)
  ──────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ─── PALETA ──────────────────────────────────────────
     Negro: espacio profundo
     Cobre dorado: calor del metal
     Azul acero: precisión técnica
  ──────────────────────────────────────────────────── */

  /* Fondos dark */
  --color-void:        #050505;
  --color-black:       #0a0a0a;
  --color-surface:     #111111;
  --color-surface-2:   #181818;
  --color-border:      #222222;
  --color-border-fine: #1a1a1a;

  /* Fondo light (sección Fundamentos) */
  --color-light-bg:    #F4F3EF;
  --color-light-bg-2:  #EDECE8;
  --color-light-border:#D8D5CE;

  /* Acento principal — cobre/dorado envejecido */
  --color-gold:        #B8862B;
  --color-gold-bright: #D4A03A;
  --color-gold-dim:    rgba(184, 134, 43, 0.15);
  --color-gold-glow:   rgba(184, 134, 43, 0.08);

  /* Acento secundario — azul acero (Nivel 02) */
  --color-steel:       #4A7FA5;
  --color-steel-dim:   rgba(74, 127, 165, 0.12);

  /* Texto */
  --color-text-primary:  #FDFCFB; /* Brighter for better contrast */
  --color-text-secondary:#C0B8B0; /* Brighter */
  --color-text-muted:    #8C847C; /* Significantly brighter */
  --color-text-disabled: #4A4744;

  /* Texto en modo light */
  --color-text-dark:     #050505; /* Darker */
  --color-text-dark-2:   #1C1B18; /* Darker */
  --color-text-dark-muted:#55524D; /* Darker */

  /* ─── TIPESCALA ───────────────────────────────────────── */
  --text-xs:    0.75rem;     /* 12px (increased from 11px) */
  --text-sm:    0.875rem;    /* 14px (increased from 13px) */
  --text-base:  1.0625rem;   /* 17px (increased from 16px) */
  --text-md:    1.25rem;     /* 20px (increased from 18px) */
  --text-lg:    1.375rem;    /* 22px */
  --text-xl:    1.625rem;    /* 26px (decreased from 28px) */
  --text-2xl:   2rem;        /* 32px (decreased from 36px) */
  --text-3xl:   2.5rem;      /* 40px (decreased from 48px) */
  --text-4xl:   3.5rem;      /* 56px (decreased from 72px) */
  --text-hero:  clamp(4rem, 9vw, 7.5rem); /* Also slightly decreased hero text */

  /* ─── ESPACIADO ───────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ─── LAYOUT ──────────────────────────────────────────── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --gutter:         clamp(1.5rem, 5vw, 4rem);

  /* ─── EFECTOS ─────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-glow-gold:  0 0 40px rgba(184, 134, 43, 0.12), 0 0 80px rgba(184, 134, 43, 0.06);
  --shadow-glow-steel: 0 0 30px rgba(74, 127, 165, 0.15);
  --shadow-card:       0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lift:       0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);

  /* Grain overlay intensity */
  --grain-opacity: 0.025;
}