/* =============================================================
   rejstřík.ai — Redesign tokens (Anthropic Paper)
   Additive layer on top of /archive-v2/tokens.css. Adds:
   - new typography stack (Geist + Geist Mono + Fraunces)
   - extended palette tokens (mute/dim/accent-soft/good/warn/bad/gold)
   - layout shell, hero, card, pill, score-chip vars
   The whole redesigned site can be reskinned by editing this file.
   ============================================================= */

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

:root,
:root[data-design="anthropic"] {
  /* ── Palette: warm "paper" + cinnabar accent ─────────────────── */
  --rd-bg:        var(--bg-canvas);
  --rd-bg-2:      var(--bg-sunken);
  --rd-bg-3:      var(--bg-pressed);
  --rd-bg-card:   var(--bg-surface);
  --rd-bg-sunken: rgba(26,24,20,.04);

  --rd-ink:       var(--fg-1);
  --rd-ink-soft:  var(--fg-2);
  --rd-mute:      var(--fg-4);
  --rd-dim:       #9a9384;

  --rd-rule:      var(--border-subtle);
  --rd-rule-2:    var(--border-default);
  --rd-rule-3:    var(--border-strong);

  --rd-accent:        var(--accent);
  --rd-accent-2:      var(--accent-hover);
  --rd-accent-soft:   var(--accent-tint);
  --rd-accent-strong: rgba(212,74,28,.35);
  --rd-accent-glow:   rgba(212,74,28,.55);
  --rd-accent-warm:   var(--cinnabar-dark);   /* secondary highlight (mission control) */

  --rd-good:      #0a7a40;
  --rd-good-soft: rgba(10,122,64,.08);
  --rd-warn:      #a8741a;
  --rd-warn-soft: rgba(168,116,26,.10);
  --rd-bad:       #b34530;
  --rd-bad-soft:  rgba(179,69,48,.10);
  --rd-gold:      #b48a2a;
  --rd-gold-soft: rgba(180,138,42,.08);

  /* On-dark surfaces (mission control, audit CTA, plan featured) */
  --rd-dark-bg:    var(--ink-400);
  --rd-dark-bg-2:  var(--ink-300);
  --rd-dark-ink:   #f5efe1;
  --rd-dark-mute:  rgba(245,239,225,.65);
  --rd-dark-dim:   rgba(245,239,225,.30);
  --rd-dark-rule:  rgba(245,239,225,.12);

  /* ── Type stack ──────────────────────────────────────────────── */
  --rd-sans:      var(--font-sans);
  --rd-mono:      var(--font-mono);
  --rd-serif:     var(--font-display);
  --rd-feat:      "ss01", "cv11";

  /* Terminal-specific (used by terminal.css component) */
  --rd-term-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', ui-monospace, monospace;
  --rd-term-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Radius / shadow ─────────────────────────────────────────── */
  --rd-r-sm: 6px;
  --rd-r-md: 10px;
  --rd-r-lg: 14px;
  --rd-r-xl: 16px;
  --rd-r-2xl: 22px;

  --rd-shadow-1: 0 1px 0 var(--rd-rule) inset, 0 8px 30px -16px rgba(26,24,20,.18);
  --rd-shadow-2: 0 14px 40px -16px rgba(26,24,20,.18);
  --rd-shadow-3: 0 30px 80px -20px rgba(26,24,20,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  --rd-shadow-glow-accent: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -10px var(--rd-accent-glow);
  --rd-shadow-glow-warm:   0 1px 0 rgba(255,255,255,.30) inset, 0 12px 30px -10px rgba(255,138,74,.5);

  /* ── Spacing (px) ────────────────────────────────────────────── */
  --rd-s-1: 4px;
  --rd-s-2: 8px;
  --rd-s-3: 12px;
  --rd-s-4: 16px;
  --rd-s-5: 20px;
  --rd-s-6: 24px;
  --rd-s-7: 28px;
  --rd-s-8: 32px;
  --rd-s-10: 40px;
  --rd-s-12: 48px;
  --rd-s-16: 64px;
  --rd-s-20: 80px;

  /* ── Layout shell ────────────────────────────────────────────── */
  --rd-shell-rail: 200px;
  --rd-shell-aside: 340px;
  --rd-shell-max: 1480px;
  --rd-shell-pad: 28px;
  --rd-topbar-h: 60px;

  /* Animation timings */
  --rd-t-fast: .15s;
  --rd-t-med:  .25s;
  --rd-t-slow: .45s;

  /* Graph (ownership) — straight edges in current production style */
  --rd-graph-bg:    #fffdf6;
  --rd-graph-grid:  rgba(26,24,20,.11);
  --rd-graph-edge:  rgba(26,24,20,.32);
  --rd-graph-edge-strong: var(--rd-accent);
  --rd-graph-edge-hist:   rgba(26,24,20,.18);
  --rd-graph-node-bg:     #ffffff;
  --rd-graph-node-stroke: rgba(26,24,20,.22);
  --rd-graph-subject-bg:  var(--rd-accent);
  --rd-graph-subject-fg:  #ffffff;
  --rd-graph-person-bg:   rgba(255,255,255,.96);
  --rd-graph-chip-bg:     #ffffff;
  --rd-graph-chip-fg:     var(--rd-ink);
  --rd-graph-chip-edge:   rgba(26,24,20,.18);
}

/* ============================================================
   Dark mode for the Anthropic Paper variant.
   Triggers via <html data-theme="dark"> set by chrome.js or the
   inline bootstrap in firma.html. Flips surfaces + ink while
   keeping the cinnabar accent (brand stays consistent).
   ============================================================ */
:root[data-theme="dark"][data-design="anthropic"],
:root[data-theme="dark"]:not([data-design]) {
  --rd-bg:        #1a1814;
  --rd-bg-2:      #221d17;
  --rd-bg-3:      #2c251c;
  --rd-bg-card:   #25201a;
  --rd-bg-sunken: rgba(245,239,225,.04);

  --rd-ink:       #f5efe1;
  --rd-ink-soft:  #ebe4d3;
  --rd-mute:      rgba(245,239,225,.65);
  --rd-dim:       rgba(245,239,225,.40);

  --rd-rule:      rgba(245,239,225,.12);
  --rd-rule-2:    rgba(245,239,225,.20);
  --rd-rule-3:    rgba(245,239,225,.32);

  /* Cinnabar accent stays — brand identity. Soft variant brightens
     for legibility on dark surfaces. */
  --rd-accent-soft:   rgba(212,74,28,.18);
  --rd-accent-strong: rgba(212,74,28,.55);

  --rd-good:      #4dbf80;
  --rd-good-soft: rgba(77,191,128,.14);
  --rd-warn:      #d4a455;
  --rd-warn-soft: rgba(212,164,85,.14);
  --rd-bad:       #e0796a;
  --rd-bad-soft:  rgba(224,121,106,.14);
  --rd-gold:      #d4a833;
  --rd-gold-soft: rgba(212,168,51,.12);

  --rd-shadow-1: 0 1px 0 var(--rd-rule) inset, 0 8px 30px -16px rgba(0,0,0,.6);
  --rd-shadow-2: 0 14px 40px -16px rgba(0,0,0,.6);
  --rd-shadow-3: 0 30px 80px -20px rgba(0,0,0,.7), 0 1px 0 rgba(245,239,225,.05) inset;

  --rd-graph-bg:    #14110d;
  --rd-graph-grid:  rgba(245,239,225,.05);
  --rd-graph-edge:  rgba(245,239,225,.22);
  --rd-graph-edge-hist: rgba(245,239,225,.12);
  --rd-graph-node-bg:   #25201a;
  --rd-graph-node-stroke: rgba(245,239,225,.16);
  --rd-graph-person-bg: rgba(37,32,26,.96);
  --rd-graph-chip-bg:   #25201a;
  --rd-graph-chip-fg:   var(--rd-ink);
  --rd-graph-chip-edge: rgba(245,239,225,.18);
}

/* ============================================================
   Agentic OS variant (Ink palette + mint accent)
   Switch by setting <html data-design="agentic-os">
   ============================================================ */
:root[data-design="agentic-os"] {
  --rd-bg:        #08090b;
  --rd-bg-2:      #0c0d10;
  --rd-bg-3:      #14161a;
  --rd-bg-card:   #0e1014;
  --rd-bg-sunken: rgba(255,255,255,.03);

  --rd-ink:       #e9eaee;
  --rd-ink-soft:  #d6d8df;
  --rd-mute:      #7e828c;
  --rd-dim:       #5a5d66;

  --rd-rule:      rgba(255,255,255,.08);
  --rd-rule-2:    rgba(255,255,255,.14);
  --rd-rule-3:    rgba(255,255,255,.22);

  --rd-accent:        #7be0a5;
  --rd-accent-2:      #5cc88a;
  --rd-accent-soft:   rgba(123,224,165,.10);
  --rd-accent-strong: rgba(123,224,165,.35);
  --rd-accent-glow:   rgba(123,224,165,.45);
  --rd-accent-warm:   #ff7a3a;

  --rd-good:      #7be0a5;
  --rd-good-soft: rgba(123,224,165,.10);
  --rd-warn:      #e0b458;
  --rd-warn-soft: rgba(224,180,88,.12);
  --rd-bad:       #e08070;
  --rd-bad-soft:  rgba(224,128,112,.12);
  --rd-gold:      #e0b458;
  --rd-gold-soft: rgba(224,180,88,.10);

  --rd-dark-bg:    #08090b;
  --rd-dark-bg-2:  #14161a;
  --rd-dark-ink:   #e9eaee;
  --rd-dark-mute:  rgba(233,234,238,.70);
  --rd-dark-dim:   rgba(233,234,238,.40);
  --rd-dark-rule:  rgba(233,234,238,.12);

  --rd-sans:      'Geist Mono', ui-monospace, monospace;   /* mono-first */
  --rd-mono:      'Geist Mono', ui-monospace, monospace;
  --rd-serif:     'Geist', ui-sans-serif, system-ui, sans-serif;

  --rd-graph-bg:    #08090b;
  --rd-graph-grid:  rgba(255,255,255,.04);
  --rd-graph-edge:  rgba(255,255,255,.20);
  --rd-graph-edge-strong: var(--rd-accent);
  --rd-graph-edge-hist:   rgba(255,255,255,.12);
  --rd-graph-node-bg:     rgba(255,255,255,.04);
  --rd-graph-node-stroke: rgba(255,255,255,.20);
  --rd-graph-subject-bg:  var(--rd-accent);
  --rd-graph-subject-fg:  #08090b;
  --rd-graph-person-bg:   rgba(255,255,255,.04);
  --rd-graph-chip-bg:     #0c0d10;
  --rd-graph-chip-fg:     var(--rd-ink);
  --rd-graph-chip-edge:   rgba(255,255,255,.18);
}

/* Default body opt-in: pages that include this file get the redesign */
body[data-rd="on"] {
  background: var(--rd-bg);
  color: var(--rd-ink);
  font-family: var(--rd-sans);
  font-feature-settings: var(--rd-feat);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body[data-rd="on"] *,
body[data-rd="on"] *::before,
body[data-rd="on"] *::after { box-sizing: border-box; }

body[data-rd="on"] a { color: inherit; text-decoration: none; cursor: pointer; }
body[data-rd="on"] button { font-family: inherit; cursor: pointer; background: transparent; color: inherit; border: 0; padding: 0; }
body[data-rd="on"] ::selection { background: var(--rd-accent); color: #fff; }

/* Type scale */
body[data-rd="on"] h1, body[data-rd="on"] h2, body[data-rd="on"] h3 { margin: 0; font-weight: 400; letter-spacing: -.025em; }
body[data-rd="on"] h1 { font-family: var(--rd-serif); font-size: clamp(48px, 7vw, 116px); line-height: .92; }
body[data-rd="on"] h2 { font-family: var(--rd-serif); font-size: clamp(28px, 3.2vw, 50px); line-height: 1.02; }
body[data-rd="on"] h3 { font-family: var(--rd-serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; }

body[data-rd="on"] .rd-serif { font-family: var(--rd-serif); letter-spacing: -.025em; }
body[data-rd="on"] .rd-mono  { font-family: var(--rd-mono); letter-spacing: .02em; }
body[data-rd="on"] .rd-italic { font-style: italic; color: var(--rd-mute); }