/* TRACEKEEPERS design tokens — one source for the static portals, the React public
   pages and the museum. Colours follow the approved identity (art/branding/master):
   Ink #14232A · Deep #081014 · Ivory #F3F0E8 · Cyan #35BED2 · Amber #D49338.
   Fonts: PT Serif Bold (wordmark/display, OFL) and TK Sans, a renamed subset of
   IBM Plex Sans Variable (OFL, see /assets/fonts/NOTICE-TKSans.txt). */

@font-face {
  font-family: "TK Serif";
  src: url("/assets/fonts/PTSerif-Bold.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TK Sans";
  src: url("/assets/fonts/TKSans-Latin.woff2") format("woff2-variations"), url("/assets/fonts/TKSans-Latin.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-218F, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "TK Sans";
  src: url("/assets/fonts/TKSans-GreekCyrillic.woff2") format("woff2-variations"), url("/assets/fonts/TKSans-GreekCyrillic.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F, U+1C80-1C88, U+2DE0-2DFF, U+A640-A69F;
}

:root {
  /* Brand */
  --tk-deep: #081014;
  --tk-ink: #14232a;
  --tk-ivory: #f3f0e8;
  --tk-cyan: #35bed2;
  --tk-amber: #d49338;

  /* Dark surfaces (default theme) */
  --tk-bg: #071015;
  --tk-surface: #0d1a20;
  --tk-raised: #142530;
  --tk-overlay: rgba(7, 16, 21, .86);
  --tk-line: rgba(243, 240, 232, .14);
  --tk-line-strong: rgba(243, 240, 232, .28);
  --tk-text: #f3f0e8;            /* 16.9:1 on --tk-bg */
  --tk-text-muted: #b8c2c4;      /* 10.6:1 on --tk-bg */
  --tk-text-faint: #8e9a9d;      /* 6.6:1 on --tk-bg; never below 14px */
  --tk-accent: #e3a650;          /* amber for text/links on dark, 9.0:1 */
  --tk-accent-strong: #d49338;
  --tk-accent-ink: #1a1206;      /* text on amber buttons */
  --tk-link: #6fd3e2;            /* cyan for inline links on dark, 11:1 */

  /* Paper surfaces (ivory sections) */
  --tk-paper: #f3f0e8;
  --tk-paper-raised: #fbf9f4;
  --tk-paper-line: rgba(20, 35, 42, .16);
  --tk-paper-text: #14232a;      /* 14.1:1 on paper */
  --tk-paper-muted: #46565c;     /* 6.7:1 on paper */
  --tk-paper-accent: #8a5512;    /* amber readable on paper, 5.4:1 */
  --tk-paper-link: #0b6f7d;

  /* Evidence status — used by badges everywhere (same words on every surface) */
  --tk-status-verified: #4fc7a6;     /* Comprobado */
  --tk-status-possible: #e3a650;     /* Posible */
  --tk-status-debated: #e98a6b;      /* Discutido */
  --tk-status-reconstructed: #9fb3ff;/* Reconstruido / recreación */
  --tk-status-fiction: #c7a8f2;      /* Personaje ficticio */

  /* Typography */
  --tk-font-display: "TK Serif", "PT Serif", Georgia, "Noto Serif", "Noto Serif Display", serif;
  --tk-font-sans: "TK Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans KR", sans-serif;
  --tk-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --tk-step--2: clamp(.75rem, .74rem + .05vw, .8rem);       /* 12px floor: legal/meta only */
  --tk-step--1: clamp(.875rem, .85rem + .12vw, .94rem);
  --tk-step-0: clamp(1rem, .97rem + .16vw, 1.09rem);         /* body */
  --tk-step-1: clamp(1.15rem, 1.08rem + .35vw, 1.35rem);     /* lead */
  --tk-step-2: clamp(1.4rem, 1.22rem + .85vw, 1.95rem);
  --tk-step-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.85rem);
  --tk-step-4: clamp(2.3rem, 1.7rem + 3vw, 4.25rem);
  --tk-step-5: clamp(2.9rem, 1.9rem + 5vw, 6.6rem);          /* hero */
  --tk-leading-tight: 1.05;
  --tk-leading-heading: 1.15;
  --tk-leading-body: 1.62;
  --tk-tracking-eyebrow: .14em;

  /* Space, layout, shape */
  --tk-space-1: 4px;
  --tk-space-2: 8px;
  --tk-space-3: 12px;
  --tk-space-4: 16px;
  --tk-space-5: 24px;
  --tk-space-6: 32px;
  --tk-space-7: 48px;
  --tk-space-8: 72px;
  --tk-space-9: 112px;
  --tk-section: clamp(64px, 9vw, 128px);
  --tk-gutter: clamp(16px, 4.5vw, 56px);
  --tk-max: 1240px;
  --tk-max-wide: 1440px;
  --tk-measure: 66ch;
  --tk-radius-s: 4px;
  --tk-radius-m: 10px;
  --tk-radius-l: 18px;
  --tk-radius-pill: 999px;
  --tk-shadow-1: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .22);
  --tk-shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .35);
  --tk-focus-ring: 0 0 0 3px var(--tk-bg), 0 0 0 6px var(--tk-cyan);

  /* Motion */
  --tk-ease: cubic-bezier(.2, .7, .2, 1);
  --tk-dur-fast: 160ms;
  --tk-dur: 260ms;
  --tk-dur-slow: 700ms;
}

/* ---------- Shared primitives (opt-in classes, prefixed tk-) ---------- */
.tk-wrap { width: min(100% - 2 * var(--tk-gutter), var(--tk-max)); margin-inline: auto; }
.tk-measure { max-width: var(--tk-measure); }

.tk-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 var(--tk-step--1)/1.2 var(--tk-font-sans);
  letter-spacing: var(--tk-tracking-eyebrow); text-transform: uppercase;
  color: var(--tk-accent);
}
.tk-eyebrow::before { content: ""; inline-size: 18px; block-size: 1px; background: currentColor; opacity: .7; }

.tk-display { font-family: var(--tk-font-display); font-weight: 700; line-height: var(--tk-leading-tight); letter-spacing: -.015em; text-wrap: balance; }
.tk-lead { font: 400 var(--tk-step-1)/1.55 var(--tk-font-sans); color: var(--tk-text-muted); text-wrap: pretty; }

.tk-button {
  --_bg: transparent; --_fg: var(--tk-text); --_bd: var(--tk-line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-block-size: 48px; padding: .75em 1.35em; border: 1px solid var(--_bd); border-radius: var(--tk-radius-pill);
  background: var(--_bg); color: var(--_fg); text-decoration: none; cursor: pointer;
  font: 600 var(--tk-step-0)/1.1 var(--tk-font-sans); letter-spacing: .005em;
  transition: background var(--tk-dur) var(--tk-ease), border-color var(--tk-dur) var(--tk-ease), color var(--tk-dur) var(--tk-ease), transform var(--tk-dur-fast) var(--tk-ease);
}
.tk-button:hover { --_bd: var(--tk-text); }
.tk-button:active { transform: translateY(1px); }
.tk-button:focus-visible { outline: none; box-shadow: var(--tk-focus-ring); }
.tk-button--primary { --_bg: var(--tk-accent-strong); --_fg: var(--tk-accent-ink); --_bd: var(--tk-accent-strong); }
.tk-button--primary:hover { --_bg: var(--tk-accent); --_bd: var(--tk-accent); }
.tk-button--quiet { --_bd: transparent; padding-inline: .4em; text-decoration: underline; text-underline-offset: .25em; }

.tk-badge {
  --_c: var(--tk-text-muted);
  display: inline-flex; align-items: center; gap: .45em; padding: .28em .7em;
  border: 1px solid color-mix(in srgb, var(--_c) 55%, transparent); border-radius: var(--tk-radius-pill);
  color: var(--_c); background: color-mix(in srgb, var(--_c) 10%, transparent);
  font: 600 var(--tk-step--2)/1.2 var(--tk-font-sans); letter-spacing: .06em; text-transform: uppercase;
}
.tk-badge::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: 50%; background: currentColor; }
.tk-badge--verified { --_c: var(--tk-status-verified); }
.tk-badge--possible { --_c: var(--tk-status-possible); }
.tk-badge--debated { --_c: var(--tk-status-debated); }
.tk-badge--reconstructed { --_c: var(--tk-status-reconstructed); }
.tk-badge--fiction { --_c: var(--tk-status-fiction); }

.tk-card {
  background: var(--tk-surface); border: 1px solid var(--tk-line); border-radius: var(--tk-radius-l);
  overflow: hidden; transition: border-color var(--tk-dur) var(--tk-ease), transform var(--tk-dur) var(--tk-ease);
}
a.tk-card:hover { border-color: var(--tk-line-strong); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .tk-button, .tk-card { transition: none; }
  a.tk-card:hover { transform: none; }
}