/* ==========================================================================
   1. MAPEO DE FUENTES LOCALES (ASSETS / FONTS)
   ========================================================================== */

/* FANTOME (Títulos Monumentales / Solo Mayúsculas) */
@font-face {
  font-family: 'Fantome';
  src: url('../../assets/fonts/Fantome-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* MERIENDA (Acentos de autor, frases selectas y firmas) */
@font-face {
  font-family: 'Merienda';
  src: url('../../assets/fonts/Merienda-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* PHILOSOPHER (Tipografía principal de UI, lectura, botones y descripciones) */
@font-face {
  font-family: 'Philosopher';
  src: url('../../assets/fonts/Philosopher-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Philosopher';
  src: url('../../assets/fonts/Philosopher-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Philosopher';
  src: url('../../assets/fonts/Philosopher-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Philosopher';
  src: url('../../assets/fonts/Philosopher-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   2. NEXO DE TOKENS DEL SISTEMA DE DISEÑO (:root)
   ========================================================================== */
:root {
  /* ========================================================================
     A. ESCALA TIPOGRÁFICA EDITORIAL (5 NIVELES SEMÁNTICOS)
     ======================================================================== */

  /* Nivel 0: Monolito Escultórico (Fantome - Máx 1 o 2 palabras) */
  --font-n0-family:    'Fantome', sans-serif;
  --font-n0-weight:    400;
  --font-n0-tracking:  0.38em;
  --font-n0-transform: uppercase;

  /* Nivel 1: Titulares Editoriales Maestros (Philosopher Bold) */
  --font-n1-family:    'Philosopher', sans-serif;
  --font-n1-weight:    700;
  --font-n1-tracking:  0.01em;

  /* Nivel 2: Rúbrica de Autor & Contrapunto (Merienda) */
  --font-n2-family:    'Merienda', cursive;
  --font-n2-weight:    400;
  --font-n2-tracking:  0.02em;

  /* Nivel 3: Cuerpo de Lectura, Interfaz & Controles (Philosopher) */
  --font-n3-family:       'Philosopher', sans-serif;
  --font-n3-weight-reg:   400;
  --font-n3-weight-bold:  700;
  --font-n3-tracking:     0.02em;
  --font-n3-tracking-btn: 0.12em;

  /* Nivel 4: Notación Técnica, Badges & Metadatos (Philosopher Italic) */
  --font-n4-family:      'Philosopher', sans-serif;
  --font-n4-style:       italic;
  --font-n4-weight:      400;
  --font-n4-weight-bold: 700;
  --font-n4-tracking:    0.04em;

  /* Alias de Retrocompatibilidad Obligatoria */
  --font-display:        var(--font-n0-family);
  --font-accent:         var(--font-n2-family);
  --font-body:           var(--font-n3-family);
  --tracking-monumental: var(--font-n0-tracking);
  --tracking-caps:       0.14em;
  --tracking-body:       var(--font-n3-tracking);

  /* ========================================================================
     B. SUPERFICIES Y FONDOS OFICIALES DE NAO STUDIO
     ======================================================================== */
  --surface-bg:        #060B14;
  --surface-primary:   #0B121E;
  --surface-card:      #111B2B;
  --surface-floating:  #19283F;
  --surface-hover:     #162337;

  /* ========================================================================
     C. CONTROLES E INPUTS
     ======================================================================== */
  --control-surface:   #17273B;
  --control-hover:     #20354F;
  --control-active:    #2B4B6E;
  --control-disabled:  #0E1522;
  --input-surface:     #080E19;

  /* ========================================================================
     D. BORDES Y LÍNEAS ESTRUCTURALES
     ======================================================================== */
  --border-subtle:        #131E2E;
  --border-control:       #263C57;
  --border-input:         #1D2E45;
  --border-input-focused: #6295B3;
  --border-painterly:     #1D5678;

  /* ========================================================================
     E. TEXTOS Y JERARQUÍAS DE LECTURA
     ======================================================================== */
  --text-primary:   #ECF2F6;
  --text-secondary: #B4C3D0;
  --text-muted:     #7D91A3;
  --text-disabled:  #435364;

  /* ========================================================================
     F. ACENTOS DE MARCA NAO
     ======================================================================== */
  --accent-primary:   #6295B3;
  --accent-secondary: #76B4CF;
  --accent-surface:   #12263A;
  --accent-border:    #386887;

  /* ========================================================================
     G. ESTADOS DEL SISTEMA
     ======================================================================== */
  --status-error:           #D95C63;
  --status-error-surface:   #28141E;
  --status-error-border:    #6E2B35;
  --status-warning:         #DCA652;
  --status-warning-surface: #261F1A;
  --status-warning-border:  #6B4F28;
  --status-success:         #4DB38A;
  --status-success-surface: #102826;
  --status-success-border:  #265C4B;

  /* ========================================================================
     H. CURVAS DE FÍSICA Y TRANSICIONES (STUDIO BOUTIQUE)
     ======================================================================== */
  --ease-boutique: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --time-fast: 200ms;
  --time-norm: 350ms;
  --time-slow: 650ms;

  /* Coordenadas dinámicas de iluminación ambiental (alimentadas por JS) */
  --mouse-x: 50%;
  --mouse-y: 45%;
}