/* =============================================================
   Rejstrik.ai — "Archive" design tokens
   colors_and_type.css
   Single source of truth. All other CSS should reference these
   custom properties. No hardcoded hex, no hardcoded px for type.
   ============================================================= */

@import url("./fonts/fonts.css");

/* -------------------------------------------------------------
   PALETTE — raw values. Do not reference these directly in UI;
   reference the semantic tokens below.
   ------------------------------------------------------------- */
:root {
  /* Paper / ink — REDESIGN: Anthropic warm paper + ink */
  --paper-50:  #ffffff;
  --paper-100: #faf7f0;   /* canvas, light mode — warm paper */
  --paper-200: #f3ede0;
  --paper-300: #ebe3d2;
  --paper-400: #C5BDA3;

  --ink-50:  #6b6557;
  --ink-100: #4C463B;
  --ink-200: #353028;
  --ink-300: #24201A;
  --ink-400: #1a1814;   /* primary ink — Anthropic warm black */
  --ink-500: #14110c;   /* canvas, dark mode — warm carbon */
  --ink-600: #08090b;

  /* Primary — cinnabar (Anthropic accent #d44a1c) */
  --cinnabar-50:  #FCE6E0;
  --cinnabar-100: #F7BEB1;
  --cinnabar-200: #EE8F7B;
  --cinnabar-300: #E06149;
  --cinnabar-400: #d44a1c;   /* primary accent — Anthropic */
  --cinnabar-500: #ba3f17;
  --cinnabar-600: #7D2315;
  --cinnabar-dark: #ff8a4a;  /* primary accent — dark mode (lifted) */

  /* Secondary — ochre (gold leaf / imperial seal) */
  --ochre-50:  #F8EBCE;
  --ochre-100: #EBD39A;
  --ochre-200: #D9B762;
  --ochre-300: #C49D3C;
  --ochre-400: #B88A2E;      /* secondary accent */
  --ochre-500: #8F6920;
  --ochre-600: #634816;

  /* Legacy aliases — keep in case any card references them. Remap to cinnabar/ochre. */
  --copper-50:  var(--cinnabar-50);
  --copper-100: var(--cinnabar-100);
  --copper-200: var(--cinnabar-200);
  --copper-300: var(--cinnabar-300);
  --copper-400: var(--cinnabar-400);
  --copper-500: var(--cinnabar-500);
  --copper-600: var(--cinnabar-600);
  --verdigris-50:  var(--ochre-50);
  --verdigris-100: var(--ochre-100);
  --verdigris-200: var(--ochre-200);
  --verdigris-300: var(--ochre-300);
  --verdigris-400: var(--ochre-400);
  --verdigris-500: var(--ochre-500);
  --verdigris-600: var(--ochre-600);

  /* Earthy semantics — ALL in the same warm family */
  --amber-400:  #C48A2A;    /* warn — honey */
  --amber-500:  #9A6A1F;
  --amber-50:   #F5E9CE;

  --rust-400:   #A8442C;    /* destructive — rust */
  --rust-500:   #802F1E;
  --rust-50:    #F2D5CC;

  /* Core references used by both modes */
  --white: #FFFFFF;
  --black: #000000;
}

/* -------------------------------------------------------------
   SEMANTIC TOKENS — LIGHT (default)
   ------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds */
  --bg-canvas:      var(--paper-100);     /* page background */
  --bg-surface:     var(--paper-50);      /* cards / panels */
  --bg-surface-2:   var(--white);         /* inputs / modals top layer */
  --bg-sunken:      var(--paper-200);     /* code blocks, table headers */
  --bg-hover:       var(--paper-200);
  --bg-pressed:     var(--paper-300);
  --bg-scrim:       rgba(26, 24, 20, .48);

  /* Foregrounds */
  --fg-1:           var(--ink-400);       /* primary text */
  --fg-2:           var(--ink-200);       /* secondary text */
  --fg-3:           var(--ink-100);       /* tertiary / metadata */
  --fg-4:           var(--ink-50);        /* muted / placeholder */
  --fg-on-accent:   var(--paper-50);      /* text on copper */
  --fg-on-inverse:  var(--paper-50);      /* text on ink surface */

  /* Borders */
  --border-subtle:  rgba(26, 24, 20, .10);
  --border-default: rgba(26, 24, 20, .18);
  --border-strong:  rgba(26, 24, 20, .32);
  --border-focus:   var(--copper-400);

  /* Accents */
  --accent:         var(--copper-400);
  --accent-hover:   var(--copper-500);
  --accent-pressed: var(--copper-600);
  --accent-tint:    var(--copper-50);
  --accent-fg:      var(--copper-500);   /* for accent-colored text */

  --positive:       var(--verdigris-400);
  --positive-tint:  var(--verdigris-50);

  --warn:           var(--amber-500);
  --warn-tint:      var(--amber-50);

  --danger:         var(--rust-500);
  --danger-tint:    var(--rust-50);

  /* Focus ring */
  --ring:           rgba(184, 88, 58, .40);
  --ring-width:     2px;
  --ring-offset:    3px;

  /* Inverse surface (for tooltips, command palette on dark in light mode) */
  --bg-inverse:     var(--ink-400);
  --fg-inverse:     var(--paper-100);

  /* Elevation — warm-tinted shadows, always subtle */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(26, 24, 20, .04), 0 2px 4px rgba(26, 24, 20, .04);
  --elev-2: 0 1px 0 rgba(26, 24, 20, .05), 0 4px 12px rgba(26, 24, 20, .06);
  --elev-3: 0 2px 0 rgba(26, 24, 20, .06), 0 12px 32px rgba(26, 24, 20, .10);
  --elev-4: 0 24px 64px rgba(26, 24, 20, .14), 0 2px 0 rgba(26, 24, 20, .06);
}

/* -------------------------------------------------------------
   SEMANTIC TOKENS — DARK
   ------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas:      var(--ink-500);
  --bg-surface:     var(--ink-400);
  --bg-surface-2:   var(--ink-300);
  --bg-sunken:      var(--ink-600);
  --bg-hover:       var(--ink-300);
  --bg-pressed:     var(--ink-200);
  --bg-scrim:       rgba(0, 0, 0, .60);

  --fg-1:           #F1ECE0;
  --fg-2:           #C9BFA9;
  --fg-3:           #9C927E;
  --fg-4:           #6C655A;
  --fg-on-accent:   var(--paper-50);
  --fg-on-inverse:  var(--ink-400);

  --border-subtle:  rgba(241, 236, 224, .08);
  --border-default: rgba(241, 236, 224, .16);
  --border-strong:  rgba(241, 236, 224, .28);
  --border-focus:   var(--copper-300);

  --accent:         var(--copper-300);
  --accent-hover:   var(--copper-200);
  --accent-pressed: var(--copper-400);
  --accent-tint:    rgba(209, 66, 46, .16);
  --accent-fg:      var(--copper-200);

  --positive:       var(--verdigris-200);
  --positive-tint:  rgba(62, 92, 85, .22);

  --warn:           var(--amber-400);
  --warn-tint:      rgba(196, 138, 42, .16);

  --danger:         var(--rust-400);
  --danger-tint:    rgba(168, 68, 44, .18);

  --ring:           rgba(204, 117, 82, .48);

  --bg-inverse:     var(--paper-100);
  --fg-inverse:     var(--ink-400);

  --elev-0: none;
  --elev-1: 0 1px 0 rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(241, 236, 224, .04);
  --elev-2: 0 2px 0 rgba(0,0,0,.32), 0 6px 16px rgba(0,0,0,.36),
            inset 0 1px 0 rgba(241, 236, 224, .05);
  --elev-3: 0 4px 0 rgba(0,0,0,.36), 0 14px 36px rgba(0,0,0,.50),
            inset 0 1px 0 rgba(241, 236, 224, .06);
  --elev-4: 0 28px 72px rgba(0,0,0,.60), 0 3px 0 rgba(0,0,0,.40),
            inset 0 1px 0 rgba(241, 236, 224, .06);
}

/* Respect user preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-canvas:      var(--ink-500);
    --bg-surface:     var(--ink-400);
    --bg-surface-2:   var(--ink-300);
    --bg-sunken:      var(--ink-600);
    --bg-hover:       var(--ink-300);
    --bg-pressed:     var(--ink-200);
    --bg-scrim:       rgba(0, 0, 0, .60);

    --fg-1:           #F1ECE0;
    --fg-2:           #C9BFA9;
    --fg-3:           #9C927E;
    --fg-4:           #6C655A;
    --fg-on-accent:   var(--paper-50);
    --fg-on-inverse:  var(--ink-400);

    --border-subtle:  rgba(241, 236, 224, .08);
    --border-default: rgba(241, 236, 224, .16);
    --border-strong:  rgba(241, 236, 224, .28);
    --border-focus:   var(--copper-300);

    --accent:         var(--copper-300);
    --accent-hover:   var(--copper-200);
    --accent-pressed: var(--copper-400);
    --accent-tint:    rgba(209, 66, 46, .16);
    --accent-fg:      var(--copper-200);

    --positive:       var(--verdigris-200);
    --positive-tint:  rgba(62, 92, 85, .22);

    --warn:           var(--amber-400);
    --warn-tint:      rgba(196, 138, 42, .16);

    --danger:         var(--rust-400);
    --danger-tint:    rgba(168, 68, 44, .18);

    --ring:           rgba(204, 117, 82, .48);

    --bg-inverse:     var(--paper-100);
    --fg-inverse:     var(--ink-400);

    --elev-1: 0 1px 0 rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.28),
              inset 0 1px 0 rgba(241, 236, 224, .04);
    --elev-2: 0 2px 0 rgba(0,0,0,.32), 0 6px 16px rgba(0,0,0,.36),
              inset 0 1px 0 rgba(241, 236, 224, .05);
    --elev-3: 0 4px 0 rgba(0,0,0,.36), 0 14px 36px rgba(0,0,0,.50),
              inset 0 1px 0 rgba(241, 236, 224, .06);
    --elev-4: 0 28px 72px rgba(0,0,0,.60), 0 3px 0 rgba(0,0,0,.40),
              inset 0 1px 0 rgba(241, 236, 224, .06);
  }
}

/* -------------------------------------------------------------
   TYPOGRAPHY TOKENS
   ------------------------------------------------------------- */
:root {
  /* Font families */
  /* Display serif — Instrument Serif: high-contrast, characterful, memorable.
     Its italic is the calling card. Editorial-weight only (400). */
  --font-display: "Fraunces", "Instrument Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-serif:   "Fraunces", "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:   "Geist", "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Scale — modular, hand-tuned for Czech diacritics (extra leading) */
  --fs-xs:   11px;   /* eyebrow caps */
  --fs-sm:   13px;   /* metadata, table body */
  --fs-base: 15px;   /* body */
  --fs-md:   17px;   /* intro paragraphs */
  --fs-lg:   20px;   /* h4 */
  --fs-xl:   24px;   /* h3 */
  --fs-2xl:  32px;   /* h2 */
  --fs-3xl:  44px;   /* h1 */
  --fs-4xl:  60px;   /* display */
  --fs-5xl:  80px;   /* hero display */

  /* Line heights — larger than usual to handle Czech ascenders/descenders (ř, ů, í, á) */
  --lh-tight:   1.14;
  --lh-snug:    1.28;
  --lh-normal:  1.48;
  --lh-relaxed: 1.64;

  /* Tracking */
  --tr-caps:     0.08em;
  --tr-tight:   -0.01em;
  --tr-display: -0.02em;
  --tr-body:     0;
  --tr-mono:    -0.005em;

  /* -----------------------------------------------------------
     SPACING — 8px baseline, 2px micro-steps for dense table UI
     ----------------------------------------------------------- */
  --sp-0:   0;
  --sp-px:  1px;
  --sp-0-5: 2px;
  --sp-1:   4px;
  --sp-1-5: 6px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --radius-none:   0;
  --radius-xs:     2px;   /* inputs */
  --radius-sm:     4px;   /* buttons, default cards */
  --radius-md:     6px;
  --radius-lg:     8px;   /* modals, feature cards */
  --radius-xl:     12px;  /* floating overlays */
  --radius-pill:   999px; /* chips, avatars, badges */

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --dur-micro:   120ms;
  --dur-base:    200ms;
  --dur-graph:   360ms;
  --dur-page:    560ms;

  --ease-out:     cubic-bezier(.2, .7, .2, 1);
  --ease-in-out:  cubic-bezier(.6, .0, .2, 1);
  --ease-spring:  cubic-bezier(.34, 1.15, .64, 1);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --content-narrow: 720px;
  --content-reading: 960px;
  --content-wide:   1200px;
  --content-app:    1440px;

  /* Z-index */
  --z-sticky:   10;
  --z-dropdown: 40;
  --z-modal:    60;
  --z-popover:  70;
  --z-toast:    80;
}

/* -------------------------------------------------------------
   BASE + SEMANTIC TYPE — apply these classes directly or via
   element defaults. Opt-in; system doesn't force them globally.
   ------------------------------------------------------------- */
html {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Czech hyphenation is opt-in on long-form prose only (never UI chrome) */
.t-body, .t-lead, .prose, p.t-body, p.t-lead {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Headings + buttons + nav chrome must never hyphenate */
h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4,
button, .btn, nav, .nav, .pill, .eyebrow, .t-meta {
  hyphens: none;
  -webkit-hyphens: none;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
}

/* Narrative (serif) */
.t-display,
.t-h1, .t-h2, .t-h3, .t-h4,
.t-lead {
  font-family: var(--font-serif);
  color: var(--fg-1);
  font-feature-settings: "ss01" on, "kern" on;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 400;
  line-height: 90%;
  letter-spacing: -0.015em;
}
.t-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 90%;
  letter-spacing: -0.015em;
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 94%;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 98%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.t-h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.t-lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Body (sans) */
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Analytical (mono) — for numbers + identifiers */
.t-num,
.t-id,
.t-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "ss02" on, "calt" off;
  letter-spacing: var(--tr-mono);
}
.t-num {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.t-num-lg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  color: var(--fg-1);
}
.t-id {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.t-code {
  font-size: var(--fs-sm);
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

/* Utilities */
.link {
  color: var(--positive);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-micro) var(--ease-out);
}
.link:hover { color: var(--accent-fg); }
.link:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-xs);
}

/* Selection */
::selection {
  background: var(--accent-tint);
  color: var(--fg-1);
}

/* Czech quote helper */
.q-cs::before { content: "\201E"; }
.q-cs::after  { content: "\201C"; }