/* ===================================================================
   DESIGN TOKENS — sistema de identidad visual
   Soft Cyberpunk + Editorial + Creative Developer
   =================================================================== */

@font-face {
  font-family: 'Kylora';
  src: url('../assets/fonts/kylora/Kylora-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Kylora';
  src: url('../assets/fonts/kylora/Kylora-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Kylora';
  src: url('../assets/fonts/kylora/Kylora-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- color · base ---- */
  --bone: #F2ECE0;         /* blanco cálido, no puro */
  --bone-dim: #E3DBC9;     /* bone con más cuerpo, bordes/superficies claras */
  --ink: #10131A;          /* negro azulado, no puro */
  --ink-soft: #171B24;     /* panel oscuro, un paso por encima de ink */
  --ink-raised: #1E2330;   /* tarjetas / elementos elevados sobre ink */

  /* ---- color · identidad ---- */
  --accent: #4C9187;       /* oxidized teal — color principal de identidad */
  --accent-deep: #2B564F;  /* variante oscura, para texto sobre bone */
  --accent-soft: #4C918733; /* teal a 20% para glows/washes */

  /* ---- color · acento secundario / signal ---- */
  --signal: #C97A46;       /* burnt copper — CTAs, cursor, estados activos */
  --signal-soft: #C97A4633;

  /* ---- color · ocasional / estados especiales ---- */
  --special: #8C7FA6;      /* dusty violet — color de firma del hero (glow, canvas, palabra acentuada) */

  /* ---- color · neutros ---- */
  --muted: #9AA0AC;        /* texto secundario sobre ink */
  --muted-2: #5B606C;      /* texto terciario / disabled sobre ink */
  --muted-on-bone: #6B6558;/* texto secundario sobre bone */
  --line: #FFFFFF14;       /* líneas/bordes sutiles sobre ink */
  --line-strong: #FFFFFF26;
  --line-on-bone: #10131A1F;

  /* ---- superficie semántica activa (cambia por sección, ver body[data-theme]) ---- */
  --bg: var(--ink);
  --bg-raised: var(--ink-raised);
  --text: var(--bone);
  --text-muted: var(--muted);
  --border: var(--line);

  /* ---- tipografía ---- */
  --font-display: 'Kylora', 'Syne', 'Arial Narrow', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-hero: clamp(1.5rem, 7vw, 6.6rem);
  --fs-display: clamp(2.6rem, 6.4vw, 5.25rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.6rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.94;
  --lh-snug: 1.15;
  --lh-body: 1.6;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.22em;

  /* ---- espaciado ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  --section-pad: clamp(4.5rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-w: 1px;

  --content-max: 1360px;

  /* ---- motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-instant: 0.12s;
  --dur-fast: 0.24s;
  --dur-base: 0.45s;
  --dur-slow: 0.85s;
  --dur-scene: 1.4s;

  /* ---- z-index ---- */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 500;
  --z-cursor: 900;
  --z-overlay: 800;
}

/* Secciones "insert editorial" — panel claro dentro de la experiencia oscura */
[data-theme="bone"] {
  --bg: var(--bone);
  --bg-raised: var(--bone-dim);
  --text: var(--ink);
  --text-muted: var(--muted-on-bone);
  --border: var(--line-on-bone);
}