/**
 * Permanencia — tokens canónicos + alias Canon (chrome del manual).
 * Fuente: oqo-permanencia. Cero hex sueltos en UI.
 */
@font-face {
  font-family: 'PPFormula';
  src: url('/fonts/formula/PPFormula-NarrowBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'PPFormula';
  src: url('/fonts/formula/PPFormula-NarrowSemibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'PPRader';
  src: url('/fonts/rader/PPRader-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PPRader';
  src: url('/fonts/rader/PPRader-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'PPSupplyMono';
  src: url('/fonts/supply-mono/PPSupplyMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --origen: #faf6ee;
  --origen-rgb: 250 246 238;
  --base: #1c1815;
  --base-rgb: 28 24 21;
  --roble: #b07a3e;
  --roble-rgb: 176 122 62;
  --veta: #e4d4bc;
  --veta-rgb: 228 212 188;
  --piedra: #c9c2b6;
  --piedra-rgb: 201 194 182;
  --resalte: #5c93c9;
  --resalte-rgb: 92 147 201;
  --tinta-sig: var(--resalte);
  --tinta-sig-rgb: var(--resalte-rgb);
  --blanco: #fff;
  --blanco-rgb: 255 255 255;

  --origen-pct: 40%;
  --base-pct: 28%;
  --roble-pct: 16%;
  --veta-pct: 8%;
  --resalte-pct: 4%;
  --piedra-pct: 4%;

  --roble-08: #f4ece0;
  --roble-08-rgb: 244 236 224;
  --roble-16: #eee2d2;
  --roble-16-rgb: 238 226 210;
  --roble-24: #e8d8c4;
  --roble-24-rgb: 232 216 196;
  --roble-40: #dcc4a8;
  --roble-40-rgb: 220 196 168;
  --roble-shade-15: #9a6b38;
  --roble-shade-15-rgb: 154 107 56;
  --roble-shade-30: #845d32;
  --roble-shade-30-rgb: 132 93 50;
  --roble-shade-50: #66492a;
  --roble-shade-50-rgb: 102 73 42;

  --ink-08: #e8e4dd;
  --ink-08-rgb: 232 228 221;
  --ink-14: #dbd7d0;
  --ink-14-rgb: 219 215 208;
  --ink-42: #9d9993;
  --ink-42-rgb: 157 153 147;
  --ink-68: #635f5a;
  --ink-68-rgb: 99 95 90;
  --ink-85: #3d3936;
  --ink-85-rgb: 61 57 54;

  --veta-35: #f2eadd;
  --veta-35-rgb: 242 234 221;
  --veta-55: #eee3d3;
  --veta-55-rgb: 238 227 211;
  --veta-75: #eaddc9;
  --veta-75-rgb: 234 221 201;
  --piedra-soft: #e2dcd2;
  --piedra-soft-rgb: 226 220 210;

  --resalte-12: #eef4fa;
  --resalte-12-rgb: 238 244 250;
  --resalte-24: #ddecf7;
  --resalte-24-rgb: 221 236 247;
  --resalte-shade-15: #4e7fb0;
  --resalte-shade-15-rgb: 78 127 176;

  --info-paper: var(--blanco);
  --info-wash: var(--resalte-12);
  --info-support: var(--resalte-24);

  --p: var(--roble);
  --d: var(--base);
  --l: var(--origen);
  --s: var(--veta);
  --a: var(--roble);
  --line: color-mix(in srgb, var(--d) 14%, transparent);

  --canvas: var(--origen);
  --ground: var(--origen);
  --ground-2: var(--veta);
  --surface: var(--origen);
  --surface-elevated: var(--veta);
  --support: var(--veta);
  --meta: var(--piedra);
  --accent: var(--roble);
  --accent-hover: var(--roble-shade-15);
  --accent-pressed: var(--roble-shade-30);
  --accent-08: var(--roble-08);
  --accent-16: var(--roble-16);
  --accent-24: var(--roble-24);
  --accent-40: var(--roble-40);
  --primary: var(--roble);
  --primary-hover: var(--roble-shade-15);
  --brand-primary: var(--roble);
  --brand-primary-deep: var(--roble-shade-15);
  --brand-accent: var(--roble);
  --brand-accent-hover: var(--roble-shade-15);
  --muralla: var(--base);
  --ink: var(--base);
  --ink-2: var(--ink-68);
  --ink-3: var(--ink-42);
  --muted: var(--ink-68);
  --rule: var(--ink-14);
  --rule-2: var(--ink-08);

  --font-ui: 'PPFormula', 'Arial Narrow', sans-serif;
  --font-ui-b: 'PPRader', Georgia, serif;
  --font-story: 'Fraunces', Georgia, serif;
  --font-story-b: 'Manrope', system-ui, sans-serif;
  --font-m: 'PPSupplyMono', ui-monospace, monospace;
  --font-s: var(--font-story);
  --font-display: var(--font-ui);
  --font-body: var(--font-story-b);
  --font-accent: var(--font-story);
  --font-mono: var(--font-m);

  --fw-story: 600;
  --fw-story-body: 400;
  --fw-ui: 600;
  --fw-mono: 500;
  --track-story: -0.015em;
  --track-ui: -0.02em;
  --track-cta: 0.06em;
  --track-mono: 0.12em;
  --lh-body: 1.55;

  --radius: 16px;
  --btn-radius: 999px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 120px;
  --dur-ack: 110ms;
  --dur-state: 220ms;
  --dur-enter: 560ms;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-floor: 11px;
  --touch-min: 44px;
  --wrap: min(1180px, 100%);
  --nav-h: 56px;
  --btn-min-size: 18px;

  color-scheme: light;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--roble);
  color: #fff;
  font-family: var(--font-ui);
  font-size: max(1.125rem, var(--btn-min-size));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms var(--ease);
}

.btn-accent:hover {
  background: var(--roble-shade-15);
}

.story-d {
  font-family: var(--font-story) !important;
  text-transform: none;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.story-b {
  font-family: var(--font-story-b) !important;
}
.ui-d {
  font-family: var(--font-ui) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.sample-display.story-d {
  font-family: var(--font-story) !important;
  text-transform: none;
  letter-spacing: -0.015em;
  font-weight: 600;
}