/* =============================================================
   GRIMERIAN — Sistema de Diseño · colors_and_type.css
   Atelier de ingeniería de software · v0.0.1 (2026-07-05)
   Tokens en OKLCH · dos atmósferas Animus (Claro / Oscuro).
   Tipografía: Stack Sans Notch (display) · Hasköy (cuerpo) · Commit Mono (mono).
   Ver CHANGELOG.md para la convención de versiones.
   ============================================================= */

/* --- Brand fonts (v0.0.1) ---
   Display: Stack Sans Notch (Google Fonts, terminaciones «notch»).
   Cuerpo:  Hasköy (variable). Mono: Commit Mono (variable).
   Geist / Geist Mono quedan como fallback próximo (Google Fonts).
   Hasköy y Commit Mono se cargan vía jsdelivr desde sus repos oficiales.
   NOTA producción: self-host los woff2 (no depender del CDN de terceros). */
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Notch:wght@400;500;600;700&family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');
@font-face {
  font-family: "Haskoy";
  src: url("https://cdn.jsdelivr.net/gh/ertekinno/haskoy@main/fonts/woff2/Haskoy-variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("https://cdn.jsdelivr.net/gh/eigilnikolajsen/commit-mono@1.143/src/fonts/fontlab/CommitMonoV142-VF.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------
   1. BRAND CONSTANTS — invariant across modes
   ------------------------------------------------------------- */
:root {
  /* The mark — OKLCH */
  --brand-cyan:        oklch(0.765 0.125 195);   /* polyhedron faces (lit) */
  --brand-cyan-deep:   oklch(0.560 0.095 197);   /* polyhedron shadow */
  --brand-cyan-ice:    oklch(0.905 0.058 195);   /* highlight, glow */
  --brand-node:        oklch(0.400 0.020 235);   /* the dark connecting nodes / lines */
  --brand-node-deep:   oklch(0.260 0.024 236);

  /* Cross-mode supporting tones (Da Vinci sepia + Pagani gold) */
  --brand-amber:       oklch(0.760 0.110 70);    /* Animus Oscuro lights */
  --brand-amber-warm:  oklch(0.680 0.120 55);
  --brand-sepia:       oklch(0.660 0.050 70);    /* notebook / Da Vinci */
  --brand-vermilion:   oklch(0.585 0.155 32);    /* signature stamp accent, used sparingly */
  --brand-teal-deep:   oklch(0.500 0.090 175);   /* extiende cyan al verde, para aprobaciones firmadas */

  /* Type families — Stack Sans Notch (display) · Hasköy (cuerpo) · Commit Mono (mono) */
  --font-display: "Stack Sans Notch", "Haskoy", "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-sans:    "Haskoy", "Geist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Commit Mono", "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type scale — modular, 1.250 minor third, anchored at 16px */
  --fs-50: 0.6875rem;  /* 11 — micro/eyebrow */
  --fs-75: 0.8125rem;  /* 13 — caption */
  --fs-100: 0.9375rem; /* 15 — body small */
  --fs-200: 1rem;      /* 16 — body */
  --fs-300: 1.125rem;  /* 18 — body large */
  --fs-400: 1.375rem;  /* 22 — h5 */
  --fs-500: 1.75rem;   /* 28 — h4 */
  --fs-600: 2.25rem;   /* 36 — h3 */
  --fs-700: 3rem;      /* 48 — h2 */
  --fs-800: 4rem;      /* 64 — h1 */
  --fs-900: 5.5rem;    /* 88 — hero display */

  /* Leading */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-base: 1.5;
  --lh-loose: 1.65;

  /* Tracking */
  --tr-display: -0.022em;   /* tight optical display */
  --tr-h:       -0.012em;
  --tr-body:    -0.005em;
  --tr-eyebrow: 0.18em;     /* uppercase eyebrow / atelier label */
  --tr-mono:    -0.01em;

  /* Spacing — base 4, exponential-ish */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radii — Apple-ish, generous on cards */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 18px;
  --r-5: 24px;
  --r-pill: 999px;

  /* Borders — hairlines are signature */
  --bw-hair: 0.5px;
  --bw-1: 1px;
  --bw-2: 2px;

  /* Motion — Apple-style easing, atelier-slow at the top end */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-atelier: cubic-bezier(0.22, 1, 0.36, 1);  /* signature */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
  --dur-5: 900ms;
  /* Para loops infinitos — spinners, skeletons, pulses */
  --dur-6: 1400ms;
  --dur-7: 2100ms;
  --dur-8: 3200ms;

  /* Breakpoints — referencia (no se pueden usar dentro de @media,
     pero quedan publicados como contrato y son legibles vía JS).
     Mantén estos valores sincronizados con las @media del sistema. */
  --bp-sm:  640px;   /* large phone landscape / small tablet portrait */
  --bp-md:  768px;   /* tablet portrait */
  --bp-lg:  1024px;  /* tablet landscape / small laptop */
  --bp-xl:  1280px;  /* laptop / desktop */
  --bp-2xl: 1536px;  /* monitor grande */

  /* Containers — max-widths editoriales */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1240px;   /* default del sitio Grimerian */
  --container-2xl:     1400px;
  --container-content: 720px;    /* columna de lectura larga */

  /* Z-index scale — capas declaradas */
  --z-base:     0;
  --z-raised:   1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* Fluid type — clamp(min, fluid, max).
     Escalan suave entre ~375px y ~1400px viewport. */
  --fs-fluid-display: clamp(2.5rem,    5vw + 0.5rem,    5.5rem);   /* 40 → 88 */
  --fs-fluid-h1:      clamp(2rem,      4vw + 0.5rem,    4rem);     /* 32 → 64 */
  --fs-fluid-h2:      clamp(1.625rem,  2.5vw + 0.75rem, 3rem);     /* 26 → 48 */
  --fs-fluid-h3:      clamp(1.375rem,  1.5vw + 0.75rem, 2.25rem);  /* 22 → 36 */
  --fs-fluid-lead:    clamp(1.125rem,  0.5vw + 1rem,    1.375rem); /* 18 → 22 */
  --fs-fluid-body:    clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem); /* 15 → 17 */
}

/* -------------------------------------------------------------
   Container utility — usa los max-widths de arriba.
   ------------------------------------------------------------- */
.container        { width: 100%; margin-inline: auto; padding-inline: 24px; max-width: var(--container-xl); }
.container-sm     { max-width: var(--container-sm); }
.container-md     { max-width: var(--container-md); }
.container-lg     { max-width: var(--container-lg); }
.container-xl     { max-width: var(--container-xl); }
.container-2xl    { max-width: var(--container-2xl); }
.container-content { max-width: var(--container-content); }

@media (min-width: 768px) { .container { padding-inline: 32px; } }
@media (min-width: 1280px) { .container { padding-inline: 48px; } }

/* -------------------------------------------------------------
   2. ATMOSPHERE — CLARO (default light)
   Inspired by Animus Claro: silvery cloud light, cool whites,
   pale blue particles. Apple SF clean meets atelier paper.
   ------------------------------------------------------------- */
:root,
[data-atmosphere="claro"] {
  /* Surfaces — "Blanco clínico Apple": luminoso, crisp, tinte cyan mínimo */
  --bg:           oklch(0.982 0.005 205);   /* base — papel clínico */
  --bg-elev-1:    oklch(0.997 0.003 205);   /* card (nunca #fff puro) */
  --bg-elev-2:    oklch(0.999 0.002 205);   /* modal / floating */
  --bg-sunken:    oklch(0.963 0.006 207);   /* recessed */
  --bg-tint:      oklch(0.955 0.020 197);   /* faint cyan wash */

  /* Foreground — tinta teñida al hue frío */
  --fg:           oklch(0.235 0.024 235);   /* primary text — node-deep */
  --fg-muted:     oklch(0.475 0.022 232);
  --fg-subtle:    oklch(0.635 0.017 226);
  --fg-faint:     oklch(0.775 0.012 220);
  --fg-on-brand:  oklch(0.200 0.030 210);

  /* Lines */
  --line:         oklch(0.908 0.010 210);
  --line-strong:  oklch(0.845 0.014 214);
  --line-hair:    oklch(0.235 0.024 235 / 0.08);

  /* Accents */
  --accent:           var(--brand-cyan);
  --accent-hover:     oklch(0.720 0.120 196);
  --accent-press:     oklch(0.660 0.110 197);
  --accent-soft:      oklch(0.945 0.030 197);
  --accent-contrast:  oklch(0.200 0.030 210);
  /* Versión accesible del accent — para texto, links, eyebrows (AA ~6:1 sobre
     papel). El --accent vivido se reserva para fondos, iconos, glows. */
  --accent-text:      oklch(0.520 0.088 200);

  /* Button surfaces */
  --btn-primary-bg:   oklch(0.470 0.086 200);   /* cyan engraved */
  --btn-primary-fg:   oklch(0.985 0.010 200);
  --btn-danger-bg:    oklch(0.545 0.150 30);    /* wax-seal red */
  --btn-danger-fg:    oklch(0.990 0.010 30);
  --btn-success-bg:   oklch(0.500 0.100 168);   /* deep teal, extiende cyan */
  --btn-success-fg:   oklch(0.990 0.010 168);

  /* Semantic — paleta de estado */
  --success: oklch(0.660 0.130 158);
  --warning: oklch(0.720 0.130 75);
  --danger:  oklch(0.600 0.160 30);
  --info:    oklch(0.620 0.120 245);
  --neutral: oklch(0.580 0.020 240);   /* slate — mensajes sin estado */
  --violet:  oklch(0.580 0.160 292);   /* destacado / nuevo / IA */
  --rose:    oklch(0.620 0.150 350);   /* énfasis suave */
  --amber:   oklch(0.750 0.120 78);    /* prestigio / featured */
  --teal:    oklch(0.660 0.110 185);   /* alterno al brand-cyan, más verde */
  --indigo:  oklch(0.540 0.140 268);   /* autoridad serena */

  /* Shadows — soft, Apple-paper */
  --shadow-1: 0 1px 2px oklch(0.235 0.02 235 / 0.07);
  --shadow-2: 0 2px 6px oklch(0.235 0.02 235 / 0.06), 0 12px 32px oklch(0.235 0.02 235 / 0.09);
  --shadow-3: 0 4px 10px oklch(0.235 0.02 235 / 0.08), 0 26px 52px oklch(0.235 0.02 235 / 0.13);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.7);
  --glow-brand: 0 0 0 4px oklch(0.765 0.125 195 / 0.22);

  /* Committed — superficies de marca (hero) */
  --hero-bg:     oklch(0.320 0.052 232);
  --hero-fg:     oklch(0.975 0.012 200);
  --hero-accent: oklch(0.845 0.105 193);

  /* Atmosphere visual */
  --atmosphere-image: url("assets/atmospheres/animus-claro.png");
  color-scheme: light;
}

/* -------------------------------------------------------------
   3. ATMOSPHERE — OSCURO
   Inspired by Animus Alternativo: stormy slate, cool fog,
   electric ice-cyan molecular meshes. The night side of the atelier.
   ------------------------------------------------------------- */
[data-atmosphere="oscuro"] {
  --bg:           oklch(0.255 0.028 236);
  --bg-elev-1:    oklch(0.310 0.032 236);
  --bg-elev-2:    oklch(0.350 0.035 236);
  --bg-sunken:    oklch(0.215 0.026 236);
  --bg-tint:      oklch(0.320 0.040 210);

  --fg:           oklch(0.955 0.012 205);
  --fg-muted:     oklch(0.760 0.022 214);
  --fg-subtle:    oklch(0.585 0.022 220);
  --fg-faint:     oklch(0.430 0.024 226);
  --fg-on-brand:  oklch(0.200 0.030 220);

  --line:         oklch(0.450 0.020 230 / 0.50);
  --line-strong:  oklch(0.550 0.024 226 / 0.65);
  --line-hair:    oklch(0.900 0.020 210 / 0.06);

  --accent:           oklch(0.845 0.100 194);   /* electric ice-cyan */
  --accent-hover:     oklch(0.885 0.090 194);
  --accent-press:     oklch(0.790 0.100 194);
  --accent-soft:      oklch(0.845 0.100 194 / 0.14);
  --accent-contrast:  oklch(0.230 0.030 236);
  /* En oscuro el accent vivido ya pasa ~10:1 sobre el bg slate */
  --accent-text:      oklch(0.855 0.098 194);

  /* En oscuro los botones invierten: superficie clara, texto oscuro */
  --btn-primary-bg:   oklch(0.845 0.100 194);
  --btn-primary-fg:   oklch(0.230 0.030 236);
  --btn-danger-bg:    oklch(0.700 0.130 30);
  --btn-danger-fg:    oklch(0.200 0.030 30);
  --btn-success-bg:   oklch(0.720 0.120 165);
  --btn-success-fg:   oklch(0.200 0.030 165);

  --success: oklch(0.780 0.130 162);
  --warning: oklch(0.820 0.120 80);
  --danger:  oklch(0.720 0.140 32);
  --info:    oklch(0.800 0.100 210);
  --neutral: oklch(0.700 0.020 235);
  --violet:  oklch(0.750 0.130 292);
  --rose:    oklch(0.760 0.120 350);
  --amber:   oklch(0.820 0.110 82);
  --teal:    oklch(0.780 0.100 185);
  --indigo:  oklch(0.720 0.120 268);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-2: 0 4px 10px oklch(0 0 0 / 0.35), 0 18px 44px oklch(0 0 0 / 0.45);
  --shadow-3: 0 8px 20px oklch(0 0 0 / 0.40), 0 34px 64px oklch(0 0 0 / 0.50);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.06);
  --glow-brand: 0 0 18px oklch(0.845 0.100 194 / 0.35), 0 0 0 1px oklch(0.845 0.100 194 / 0.40);

  /* Committed — superficies de marca (hero) */
  --hero-bg:     oklch(0.205 0.028 236);
  --hero-fg:     oklch(0.965 0.012 200);
  --hero-accent: oklch(0.855 0.100 194);

  --atmosphere-image: url("assets/atmospheres/animus-oscuro.png");
  color-scheme: dark;
}

/* -------------------------------------------------------------
   5. SEMANTIC TYPE TOKENS — readymade roles
   ------------------------------------------------------------- */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-sans); font-size: var(--fs-200); line-height: var(--lh-base); letter-spacing: var(--tr-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-800);
  line-height: var(--lh-tight);
  letter-spacing: -0.028em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-700);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  letter-spacing: -0.008em;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  text-wrap: pretty;
  max-width: 65ch;
}

.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-400);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-50);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.signature {
  /* Pagani-style nameplate: engraved mono instead of italic serif */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-75);
  color: var(--fg-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-75);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
  color: var(--fg);
}

a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-text) 35%, transparent);
  transition: color var(--dur-1) var(--ease-out-quart), border-color var(--dur-1) var(--ease-out-quart);
}
/* Hover preserva el color (sigue siendo AA) — el feedback viene del subrayado al 100% */
a:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }

/* Énfasis = color, nunca itálica (brand register). Reglas más específicas
   (.stat-num em, .pullquote em) mantienen su propio color. */
em { font-style: normal; color: var(--accent-text); }

/* Selection — branded */
::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--fg); }