/* ==========================================================================
   TOKENS · V3 con el sistema visual «Resend» (14/10/2026)
   Lienzo negro puro, líneas grafito de 1 px, texto blanco hueso, un violeta
   para identificadores (direcciones, código) y azul señal para la acción.
   Fuentes libres sustitutas de las del modelo (OFL, alojadas aquí):
     Domaine → Playfair Display · aBC Favorit → Inter Display · Commit Mono → JetBrains Mono
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-variable-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic-variable-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-variable-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Reservas con métricas parecidas: el texto no salta al cargar las fuentes. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia");
  size-adjust: 112%;
  ascent-override: 96%;
  descent-override: 22%;
}

:root {
  color-scheme: dark;

  /* --- Color (Resend) --- */
  --c-bg: #000000;            /* Void Black: todo el lienzo */
  --c-surface: #000000;       /* tarjetas: negras, separadas por la línea */
  --c-raised: #0b0e14;        /* Surface Lift: paneles elevados */
  --c-raised-2: #111418;      /* marcadores de material pendiente */
  --c-heading: #ffffff;       /* titulares */
  --c-text: #f0f0f0;          /* Bone White: lectura (18,8:1) */
  --c-text-2: #a1a4a5;        /* Ash Gray: secundario (8,2:1) */
  --c-text-3: #6e727a;        /* Iron: decorativo y desactivado (no para texto importante) */
  --c-line: #292d30;          /* Graphite Hairline: toda separación */
  --c-line-soft: #1b1e21;     /* divisiones internas más discretas */
  --c-line-strong: #4a4f54;   /* borde al pasar el ratón */
  --c-violet: #9281f7;        /* Iris Violet: direcciones, código, identificadores */
  --c-violet-glow: #baa7ff;
  --g-iris: linear-gradient(to right bottom in oklab, rgb(146 129 247) 0%, rgb(154 84 220) 100%);
  --c-link: #70b8ff;          /* Sky Blue: enlaces de texto */
  --c-amber: #ffca16;         /* estado «en desarrollo» */
  --c-green: #3ad389;         /* estado «en marcha» */
  --g-surface: linear-gradient(rgb(27 27 27), rgb(3 3 3));
  --ring-subtle: 0 0 0 1px rgb(176 199 217 / 0.145);

  /* Acción: candidatos de azul/violeta comparables desde el entorno de revisión. */
  --accent-a: #3b9eff;        /* Signal Blue (de partida) · 7,9:1 con texto negro */
  --accent-b: #70b8ff;        /* Sky Blue · 10,1:1 con texto negro */
  --accent-c: #9281f7;        /* Iris Violet · 6,9:1 con texto negro */
  --c-accent: var(--accent-a);
  --c-accent-deep: color-mix(in srgb, var(--c-accent) 82%, #fff);
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --c-on-accent: #000000;
  --c-focus: var(--c-accent);

  /* --- Tipografía --- */
  --font: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: 0.75rem;           /* 12 */
  --fs-sm: 0.875rem;          /* 14 */
  --fs-base: 1rem;            /* 16 */
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-title: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);        /* 56: titular de sección */
  --fs-title-sm: clamp(2rem, 1.4rem + 2vw, 3rem);
  /* El nombre es el gran gesto: serif editorial (Domaine → Playfair). */
  --fs-name: clamp(2.9rem, 1rem + 8.6vw, 8.6rem); /* monoespaciada: 9 caracteres caben en la columna */
  --fs-contact: clamp(3rem, 1.8rem + 4.2vw, 4.8rem);      /* 77: display secundario */
  --lh-body: 1.6;
  --lh-tight: 1.15;
  --tracking-label: 0.04em;
  --tracking-title: -0.05em;  /* firma del modelo a 56 px */
  --tracking-display: -0.01em;

  /* --- Medidas --- */
  --container: 75rem;        /* 1200 px */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --bar-top: 14px;            /* separación de la cápsula (como alextoll.store) */
  --bar-h: 4rem;
  --bar-space: calc(var(--bar-top) + var(--bar-h)); /* lo que ocupa la barra arriba */
  --section-y: clamp(4rem, 2.4rem + 5vw, 6rem);   /* 96 px entre secciones */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --line: 1px;
  --radius-window: 16px;      /* tarjetas, ventanas y paneles */
  --radius-panel: 24px;       /* paneles grandes */
  --radius-ui: 6px;           /* botones, insignias y controles */
  --radius-pill: 999px;       /* barra (como alextoll.store) y píldoras */
  --tap: 44px;                /* área táctil mínima */
  --z-bar: 50;
  --z-name: 60;
  --z-pop: 70;

  /* --- Movimiento (tiempos de partida del brief, ajustables) --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);      /* suave y amplia: la elegida */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-silk: cubic-bezier(0.7, 0, 0.16, 1);     /* transiciones entre secciones: arranca lento, se desliza y frena largo */
  --t-seam: 1400ms;                                /* costura de luz: línea y chispas comparten duración */
  --t-intro: 680ms;           /* A01 · 450–750 ms */
  --t-reveal: 900ms;          /* aparición al bajar (como alextoll.store) */
  --t-hide: 520ms;            /* desaparición al subir */
  --reveal-y: 28px;           /* recorrido vertical de la aparición */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);   /* sale rápido y frena largo: dinámica */
  --ease-hide: cubic-bezier(0.4, 0, 0.7, 0.2);    /* acelera al irse */
  --t-note: 320ms;            /* A06 · 200–400 ms */
  --t-details: 520ms;         /* A07 · 350–600 ms */
  --t-viewer: 360ms;          /* A08 · 250–450 ms */
  --t-select: 300ms;          /* A10/A12 · 200–400 ms */
  --t-swap: 240ms;            /* A11 · 180–300 ms */
  --t-slide: 480ms;           /* A13 · 350–550 ms */
  --t-fill: 180ms;            /* A14 · el modelo usa 150 ms ease-out */
  --t-pop: 240ms;             /* A15 · 180–300 ms */
  --t-panel: 340ms;           /* A16 · 250–400 ms */
  --t-contact: 480ms;         /* A18 · 350–550 ms */
}

/* Acentos alternativos (solo los activa el selector de revisión). */
:root[data-accent="b"] { --c-accent: var(--accent-b); }
:root[data-accent="c"] { --c-accent: var(--accent-c); }

@media (max-width: 819px) {
  :root {
    --bar-top: 10px;
    --bar-h: 3.5rem;
    --reveal-y: 18px;
  }
}