/* =====================================================================
   MD Dental · Diagnostic Veil — tokens.css
   Fuente normativa: /home/claude/mdd/run/DESIGN.md (§2–§4, §6–§7, §12)
   Regla: ningún valor visual (hex, px, ms, easing, sombra) fuera de este
   archivo. Los componentes consumen var(--*). Un solo sistema de tokens.
   Fuentes: OFL 1.1 (ver assets/fonts/LICENSE-*.txt), subset latin, woff2.
   ===================================================================== */

/* ---------- @font-face (3 archivos · 108 996 B ≈ 106.4 KiB) ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallbacks con métricas ajustadas (anti-CLS). Calculado con fontTools:
   ancho medio sobre muestra en español vs Liberation (= métricas Times/Arial). */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("TimesNewRomanPSMT");
  size-adjust: 110.1%;
  ascent-override: 98.3%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("ArialMT");
  size-adjust: 105.1%;
  ascent-override: 92.2%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Kalam Fallback";
  src: local("Arial"), local("Liberation Sans"), local("ArialMT");
  size-adjust: 94.6%;
  ascent-override: 112.4%;
  descent-override: 56.1%;
  line-gap-override: 0%;
}

:root {
  /* ---------- §2 Color · canon Diagnostic Veil ---------- */
  --color-void: #080708;
  --color-graphite: #171719;
  --color-stone: #2B292A;
  --color-bone: #F0E8E1;
  --color-mineral: #FAF7F3;
  --color-rose: #C98E95;
  --color-rose-soft: #E8CDD0;
  --color-crimson: #8F233A;
  --color-taupe: #8B8078;
  --color-amber: #A98155;

  /* ---------- §2 Color · derivados (storyboard / moodboard) ---------- */
  --color-ivory: #F6F0E8;          /* marfil */
  --color-sand: #E6D9C9;           /* arena */
  --color-paper: #F1E8DB;          /* papel de libreta */
  --color-paper-edge: #E4D6C4;     /* canto de hoja / cinta (decorativo) */
  --color-paper-rule: #8B807829;   /* cuadrícula de libreta (taupe @16 %) */
  --color-margin-rule: #C98E9566;  /* línea de margen rosa (rose @40 %) */
  --color-ink-muted: #5F5651;      /* texto meta/ayuda en claro */
  --color-pencil: #3B3431;         /* trazo lápiz de personajes + diálogo */
  --color-pencil-soft: #6E6460;    /* sombreado / trazos secundarios (decorativo) */
  --color-blush: #E3A9AE;          /* rubor de personajes (decorativo) */
  --color-crimson-700: #74192D;    /* hover/active CTA, acento sobre rosa */
  --color-rose-700: #8E5560;       /* rosa legible como texto en claro */
  --color-amber-700: #7A5A34;      /* ámbar como texto */
  --color-taupe-300: #A79C97;      /* meta en oscuro (canon SVG) */
  --color-veil-dark: #121114;      /* panel oscuro (canon SVG) */
  --color-border-dark: #34292D;    /* hairline en oscuro (decorativo, canon SVG) */
  --color-border-subtle: #E2D8CD;  /* hairline en claro (decorativo, no identifica controles) */
  --color-border-control: #8A7F77; /* borde de inputs ≥ 3:1 */
  --color-bracket: #BDB5AD;        /* plata cálida */
  --color-bracket-light: #ECE6DF;  /* brillo del bracket */
  --color-bracket-shade: #7E756E;  /* sombra del bracket */
  --color-wire: #9A918A;           /* arco */

  /* ---------- §2 Color · estado ---------- */
  --color-error: #A12A22;
  --color-error-soft: #F6E3DF;
  --color-success: #3D6B50;
  --color-success-soft: #E3EDE4;

  /* ---------- §2 Velos translúcidos (Diagnostic Veil) ---------- */
  --veil-bone: rgb(250 247 243 / 0.62);
  --veil-rose: rgb(232 205 208 / 0.42);
  --veil-crimson: rgb(143 35 58 / 0.10);
  --veil-taupe: rgb(139 128 120 / 0.16);  /* placa translúcida cálida (Diagnostic Veil) */
  --veil-dark: rgb(18 17 20 / 0.72);
  --veil-blur: 8px;

  /* ---------- Roles semánticos (capa por defecto = Experiencia clara) ---------- */
  --surface-page: var(--color-paper);
  --surface-raised: var(--color-ivory);
  --surface-note: var(--color-rose-soft);
  --surface-card: var(--color-ivory);
  --text-strong: var(--color-graphite);
  --text-body: var(--color-graphite);
  --text-muted: var(--color-ink-muted);
  --text-accent: var(--color-crimson);
  --text-hand: var(--color-pencil);
  --focus-ring-color: var(--color-crimson);

  /* ---------- §3 Tipografía ---------- */
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-hand: "Kalam", "Kalam Fallback", "Segoe Print", "Bradley Hand", cursive;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Escala fluida 390 → 1440 px */
  --text-display-xl: clamp(2.5rem, 1.6643rem + 3.4286vw, 4.75rem);
  --text-display-l: clamp(2rem, 1.5357rem + 1.9048vw, 3.25rem);
  --text-display-m: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem);
  --text-chapter: clamp(1.75rem, 1.3786rem + 1.5238vw, 2.75rem);
  --text-hand-l: clamp(1.5rem, 1.2214rem + 1.1429vw, 2.25rem);
  --text-hand-m: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem);
  --text-title: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);
  --text-body-l: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);
  --text-body: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem);
  --text-small: 0.875rem;
  --text-label: 0.8125rem;

  --leading-display: 1.15;
  --leading-display-m: 1.2;
  --leading-hand: 1.35;
  --leading-title: 1.35;
  --leading-body-l: 1.55;
  --leading-body: 1.6;
  --leading-small: 1.5;
  --leading-label: 1.4;

  --tracking-display-xl: -0.015em;
  --tracking-display: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;

  /* ---------- §4 Espaciado (base 4 px) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-section: clamp(4rem, 3.2571rem + 3.0476vw, 6rem);  /* 64 → 96 */
  --space-stack: clamp(2rem, 1.6286rem + 1.5238vw, 3rem);    /* 32 → 48 */

  /* Grid */
  --grid-columns: 4;
  --grid-gutter: 1rem;          /* 16 */
  --grid-margin: 1.25rem;       /* 20 (≥ 16) */
  --container-max: 80rem;       /* 1280 */
  --stage-max: 90rem;           /* 1440 */

  /* Medidas con nombre (C06) */
  --measure-hero: 35rem;        /* 560 */
  --measure-prose: 34rem;       /* 544 ≈ 70 car. */
  --measure-note: 22.5rem;      /* 360 */
  --measure-mod3: 25.625rem;    /* 410 */
  --measure-form: 37.5rem;      /* 600 */
  --measure-btn-min: 12.5rem;   /* 200 */

  /* Controles */
  --control-height: 3rem;       /* 48 */
  --control-height-sm: 2.75rem; /* 44 (mínimo táctil) */
  --control-pad-x: 1rem;
  --tap-min: 2.75rem;           /* 44 */
  --check-size: 1.25rem;        /* 20 visual; zona táctil 44 por label */
  --header-height: 4rem;        /* 64 */
  --header-height-sm: 3.5rem;   /* 56 */

  /* Bordes */
  --border-hair: 1px;
  --border-control: 1.5px;
  --border-strong: 2px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* ---------- §4 Radios ---------- */
  --radius-input: 10px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-frame: 24px;
  --radius-pill: 999px;
  --radius-note: 4px;           /* nota de papel: esquina casi viva */

  /* ---------- §4 Sombras cálidas ---------- */
  --shadow-1: 0 1px 2px rgb(43 41 42 / 0.06), 0 2px 8px rgb(91 70 58 / 0.06);
  --shadow-2: 0 2px 4px rgb(43 41 42 / 0.05), 0 12px 32px -8px rgb(91 70 58 / 0.16);
  --shadow-3: 0 24px 64px -24px rgb(43 31 28 / 0.28);
  --shadow-note: 0 1px 1px rgb(43 41 42 / 0.08), 0 8px 18px -10px rgb(91 70 58 / 0.30);
  --shadow-cta: 0 6px 18px -6px rgb(143 35 58 / 0.45);
  --shadow-inset-control: inset 0 1px 2px rgb(43 41 42 / 0.06);

  /* ---------- §5 Textura (papel/grano, estática) ---------- */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .2 0 0 0 0 .19 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture-grain-opacity: 0.06;
  --texture-grain-opacity-dark: 0.08;
  --paper-grid-size: 24px;

  /* ---------- §7 Motion ---------- */
  --dur-fast: 140ms;      /* 120–160 */
  --dur-normal: 200ms;    /* 180–240 */
  --dur-reveal: 480ms;    /* 420–700 */
  --dur-reveal-long: 640ms;
  --dur-blink: 160ms;
  --ease-out-soft: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --motion-shift-sm: 8px;
  --motion-shift-md: 12px;
  --motion-shift-max: 48px;
  --scroll-tau: 100;       /* ms, S2 (JS lee este valor) */
  --scroll-jump: 0.25;
  --scroll-eps: 0.0005;

  /* ---------- Capas z ---------- */
  --z-base: 0;
  --z-veil: 1;
  --z-props: 2;
  --z-characters: 3;
  --z-copy: 4;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 70;

  /* ---------- §6 Personajes (tamaños) ---------- */
  --char-height: clamp(8.75rem, 4.5714rem + 17.1429vw, 20rem);  /* 140 → 320 px por diente */
  --char-pair-max: 32.5rem;                                /* 520 */
  --char-safe-gap: 1.5rem;                                 /* 24: holgura mínima al copy */
  --char-stroke: 2.25;                                     /* px en viewBox 240 (vector-effect none) */
}

/* ---------- Breakpoints de grid ---------- */
@media (min-width: 48rem) { /* 768 */
  :root {
    --grid-columns: 8;
    --grid-gutter: 1.25rem;   /* 20 */
    --grid-margin: 2rem;      /* 32 */
  }
}
@media (min-width: 64rem) { /* 1024 */
  :root {
    --grid-columns: 12;
    --grid-gutter: 1.5rem;    /* 24 */
    --grid-margin: 3rem;      /* 48 */
  }
}

/* ---------- Capas ---------- */
/* Operativa: valoracion.html, formulario, FAQ densas. Claro, sin textura, casi sin motion. */
.layer-operativa {
  --surface-page: var(--color-mineral);
  --surface-raised: var(--color-ivory);
  --surface-card: var(--color-ivory);
  --text-strong: var(--color-graphite);
  --text-body: var(--color-graphite);
  --text-muted: var(--color-ink-muted);
  --text-accent: var(--color-crimson);
  --focus-ring-color: var(--color-crimson);
  --texture-grain-opacity: 0;
}
/* Momento oscuro (escena 03 "Míranos por capas"; opcional footer). */
.layer-dark {
  --surface-page: var(--color-graphite);
  --surface-raised: var(--color-veil-dark);
  --surface-card: var(--color-veil-dark);
  --text-strong: var(--color-bone);
  --text-body: var(--color-bone);
  --text-muted: var(--color-taupe-300);
  --text-accent: var(--color-rose);
  --text-hand: var(--color-bone);
  --focus-ring-color: var(--color-rose-soft);
  --texture-grain-opacity: var(--texture-grain-opacity-dark);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-reveal: 0ms;
    --dur-reveal-long: 0ms;
    --dur-blink: 0ms;
    --motion-shift-sm: 0px;
    --motion-shift-md: 0px;
    --motion-shift-max: 0px;
    --scroll-tau: 0;
  }
}