/* ============================================
   EL TELAR DE MI SANGRE — Design Tokens
   3-capas: primitive → semantic → component
   ============================================ */

:root {
  /* ============================================
     1. PRIMITIVES — valores crudos
     ============================================ */

  /* Color — paleta OKLCH (perceptualmente uniforme) */
  /* Tintas cálidas */
  --c-ink-950: oklch(0.16 0.02 35);
  --c-ink-900: oklch(0.22 0.025 35);
  --c-ink-700: oklch(0.35 0.022 38);
  --c-ink-500: oklch(0.48 0.018 42);
  --c-ink-400: oklch(0.58 0.014 42);
  --c-ink-300: oklch(0.72 0.012 50);
  --c-ink-200: oklch(0.84 0.013 60);

  /* Cacao — acento principal del Telar */
  --c-cacao-700: oklch(0.36 0.09 48);
  --c-cacao-600: oklch(0.44 0.10 50);
  --c-cacao-500: oklch(0.52 0.10 52);
  --c-cacao-400: oklch(0.64 0.085 58);
  --c-cacao-200: oklch(0.86 0.04 65);

  /* Verde apagado — regenerativo */
  --c-verde-700: oklch(0.40 0.06 145);
  --c-verde-500: oklch(0.55 0.075 145);
  --c-verde-300: oklch(0.75 0.05 145);

  /* Papel — fondos */
  --c-papel-50: oklch(0.985 0.008 78);
  --c-papel-100: oklch(0.97 0.015 75);
  --c-papel-200: oklch(0.93 0.02 75);
  --c-papel-300: oklch(0.88 0.025 72);

  /* Tipografía — escalas */
  --font-display: "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Sizes — modular scale (base 16px, ratio 1.333 perfect fourth) */
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.563rem;
  --size-2xl: 2rem;
  --size-3xl: 2.625rem;
  --size-4xl: clamp(2.5rem, 4.5vw, 3.75rem);
  --size-display: clamp(3rem, 7vw, 5.75rem);
  --size-hero: clamp(3.25rem, 9.5vw, 8.5rem);
  --size-numeral: clamp(3.5rem, 9vw, 7.5rem);

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* Spacing — 4pt scale */
  --sp-2xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;
  --sp-5xl: 8rem;
  --sp-section: clamp(4rem, 8vw, 8rem);

  /* Measure (line-length) */
  --measure-narrow: 52ch;
  --measure-base: 64ch;
  --measure-wide: 72ch;

  /* Radius — muy contenido, registro editorial */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ============================================
     2. SEMANTIC — significado en el sistema
     ============================================ */

  /* Backgrounds */
  --bg-canvas: var(--c-papel-100);
  --bg-elevated: var(--c-papel-50);
  --bg-divider: var(--c-papel-200);
  --bg-strong: var(--c-ink-900);
  --bg-accent: var(--c-cacao-600);

  /* Text */
  --text-primary: var(--c-ink-900);
  --text-secondary: var(--c-ink-700);
  --text-tertiary: var(--c-ink-500);
  --text-muted: var(--c-ink-400);
  --text-on-strong: var(--c-papel-100);
  --text-accent: var(--c-cacao-700);
  --text-accent-hover: var(--c-cacao-600);

  /* Borders */
  --border-soft: var(--c-papel-300);
  --border-strong: var(--c-ink-200);
  --border-accent: var(--c-cacao-400);

  /* Typography roles */
  --type-display: var(--font-display);
  --type-body: var(--font-body);
  --type-numeral: var(--font-display);

  /* ============================================
     3. COMPONENT — tokens específicos
     ============================================ */

  /* Header sticky */
  --header-height: 4.5rem;
  --header-bg: color-mix(in oklch, var(--c-papel-100) 88%, transparent);

  /* Hero */
  --hero-min-height: 92svh;

  /* Section */
  --section-max-width: 78rem;
  --section-padding-x: clamp(1.25rem, 4vw, 3rem);

  /* Card */
  --card-padding: var(--sp-xl);
  --card-bg: var(--bg-elevated);
  --card-border: var(--border-soft);
}