/* ================================================================
   PHILOMANUS — Design Tokens
   Versión: 1.1.1 | Directiva: Quiet Confidence
   Referencia: RD-Philomanus-v1.1.1, Secciones 8.1–8.5
   ================================================================ */

/* ── Self-Hosted Fonts (WOFF2) ── */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''), url('../fonts/roboto-300.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('../fonts/roboto-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''), url('../fonts/roboto-700.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ── Colores primarios ── */
  --color-dark:           #141414;
  --color-light:          #EDEDED;

  /* ── Colores derivados ── */
  --color-dark-soft:      #1E1E1E;
  --color-dark-muted:     #2A2A2A;
  --color-light-soft:     #D9D9D9;
  --color-light-muted:    #B0B0B0;

  /* ── Colores funcionales ── */
  --color-accent:         #EDEDED;
  --color-success:        #4CAF50;
  --color-error:          #E53935;
  --color-focus:          #EDEDED80;

  /* ── Superficies ── */
  --surface-page:         #141414;
  --surface-card:         #1E1E1E;
  --surface-input:        #2A2A2A;
  --surface-overlay:      rgba(20, 20, 20, 0.92);
  --surface-nav:          rgba(20, 20, 20, 0.85);
  --surface-footer:       #0F0F0F;

  /* ── Familias tipográficas (AGENTS.md) ── */
  --font-heading:         'Roboto', sans-serif;
  --font-body:            'Roboto', sans-serif;

  /* ── Escala tipográfica (Mobile-first, base 16px) ── */
  --text-xs:              0.75rem;
  --text-sm:              0.875rem;
  --text-base:            1rem;
  --text-md:              1.125rem;
  --text-lg:              1.25rem;
  --text-xl:              1.5rem;
  --text-2xl:             2rem;
  --text-3xl:             2.5rem;
  --text-4xl:             3.5rem;
  --text-5xl:             4.5rem;

  /* ── Pesos ── */
  --weight-light:         300;
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-bold:          700;
  --weight-black:         900;

  /* ── Line Heights ── */
  --leading-tight:        1.1;
  --leading-snug:         1.3;
  --leading-normal:       1.6;
  --leading-relaxed:      1.8;

  /* ── Letter Spacing ── */
  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.1em;

  /* ── Escala de espaciado (base 4px) ── */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.25rem;
  --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;

  /* ── Contenedor ── */
  --container-max:        1200px;
  --container-padding:    var(--space-4);

  /* ── Secciones ── */
  --section-padding-y:    var(--space-16);
  --section-padding-y-lg: var(--space-24);

  /* ── Bordes ── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-full:          9999px;
  --border-width:         1px;
  --border-color:         var(--color-dark-muted);

  /* ── Sombras (usar con extrema moderación) ── */
  --shadow-sm:            0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:            0 8px 24px rgba(0,0,0,0.5);

  /* ── Transiciones ── */
  --transition-fast:      150ms ease;
  --transition-base:      300ms ease;
  --transition-slow:      500ms ease;

  /* ── Z-Index ── */
  --z-base:               1;
  --z-dropdown:           10;
  --z-sticky:             100;
  --z-overlay:            1000;
  --z-modal:              2000;

  /* ── Animaciones Quiet Confidence ── */
  --reveal-duration:       600ms;
  --reveal-easing:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --reveal-stagger:        150ms;
  --hover-duration:        300ms;
  --hover-easing:          ease;

  /* ── Layout Quiet Confidence ── */
  --section-min-height:    80vh;
  --hero-height:           100vh;
  --content-max-width:     60ch;
  --nav-height:            64px;
  --nav-blur:              8px;

  /* ── Opacidades ── */
  --opacity-muted:         0.6;
  --opacity-hover:         0.8;
  --opacity-subtle:        0.4;
}