/* Monko shared brand core + register tokens.
   One brand, three registers (editorial / cockpit / marketing), one per
   surface (DECISIONS 2026-07-13). Extracted from marketing.css so every
   layout can load the tokens without the marketing chrome; the eventual
   home for the shared core when the cockpit retheme splits editorial.css /
   cockpit.css out of tailwind/application.css. Design source:
   sketches/marketing-site/styles.css (Claude Design export, 2026-07-12). */


/* ── Monko shared brand core ─────────────────────────────────────────
   The values every register inherits. Register blocks may alias them but
   must not redefine them. */

:root {
  /* Brand color. Flat, NEVER gradiented (DECISIONS 2026-07-07). */
  --monko-violet: #5841b9;
  --monko-violet-deep: #46339a;      /* hover/pressed derivations */
  --monko-ink: #17131f;              /* violet-black ink */
  --monko-paper: #fdfcf8;            /* lifted off-white paper */
  --monko-paper-warm: #f2eff8;       /* violet-tinted wash */

  /* Annotation signal. RESERVED for the social-annotation feature on the
     editorial surface. Never on buttons, badges, or any other register. */
  --monko-signal: #c9ff5a;

  /* Neutrals derived from ink (violet-leaning, not slate-blue). */
  --monko-muted: #68616f;
  --monko-faint: #767084;            /* AA on paper (4.63:1); was #9b95a2 (2.84:1, failed) */
  --monko-line: #ddd6e8;             /* violet hairline (editorial family) */
  --monko-line-neutral: #e5e2dc;     /* warm neutral hairline (cockpit family) */

  /* Type stacks */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Charter", Georgia, "Times New Roman", serif;
  --font-ui: "Avenir Next", "Segoe UI", sans-serif;

  /* Rhythm scale (shared across registers) */
  --rhythm-1: 0.5rem;
  --rhythm-2: 1rem;
  --rhythm-3: 1.5rem;
  --rhythm-4: 2rem;
  --rhythm-5: 3rem;
  --rhythm-6: 4.5rem;

  /* Corner policy: containers are square; only small interactive
     controls may round, and only by this much. */
  --radius-control: 4px;
  --radius-none: 0;
}


/* ── Skip-to-content ─────────────────────────────────────────────────
   Accessibility affordance shared by every public layout: off-screen
   until focused, then it drops into view as the first tab stop. Built
   from the brand core so it matches whichever register loads it. */

.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--monko-ink);
  color: var(--monko-paper);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  border-radius: var(--radius-control);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
}


/* ── Editorial register tokens (referenced by product mocks) ────────
   SETTLED by Pablo (DECISIONS 2026-07-07/08) — values match
   app/assets/tailwind/application.css. Do not restyle this register. */

:root {
  --editorial-paper: #fdfcf8;
  --editorial-paper-warm: #f2eff8;
  --editorial-ink: #17131f;
  --editorial-muted: #68616f;
  --editorial-line: #ddd6e8;
  --editorial-accent: #5841b9;
  --editorial-signal: #c9ff5a;     /* annotation only */
  --editorial-code-bg: #211a33;
  --editorial-code-ink: #f6f0ff;

  --editorial-display-font: var(--font-display);
  --editorial-body-font: var(--font-body);
  --editorial-ui-font: var(--font-ui);
}


/* ── Cockpit register tokens (referenced by product mocks) ──────────
   SETTLED (Pablo, 2026-07-11): Direction A — violet family, near-flat.
   NOTE: the lab cockpit still renders on the old --workspace-* glass in
   tailwind/application.css; the retheme onto these tokens is a separate
   active effort (DECISIONS 2026-07-13). */

:root {
  --cockpit-bg: #faf9f5;
  --cockpit-surface: #fffefb;
  --cockpit-raised: #ffffff;
  --cockpit-ink: var(--monko-ink);
  --cockpit-muted: var(--monko-muted);
  --cockpit-faint: var(--monko-faint);
  --cockpit-line: #e6e3db;
  --cockpit-line-strong: #d4d0c6;

  --cockpit-accent: var(--monko-violet);
  --cockpit-accent-hover: var(--monko-violet-deep);

  --cockpit-action-bg: var(--monko-ink);
  --cockpit-action-ink: #ffffff;

  --cockpit-ok: #1a7f4e;
  --cockpit-ok-bg: #eaf5ee;
  --cockpit-warn: #b45309;
  --cockpit-warn-bg: #faf3e7;
  --cockpit-danger: #b42318;
  --cockpit-danger-bg: #fbeeec;

  --cockpit-ui-font: var(--font-ui);
  --cockpit-serif: var(--font-display);
}


/* ── Marketing register ──────────────────────────────────────────────
   The bridge register: it borrows the editorial surface's materials
   (paper, Charter, Newsreader, flat violet) at marketing scale, and the
   cockpit's UI sans for controls and labels. It proves craft by being
   made of the same stuff as the product. NO gradients, ever. */

:root {
  --marketing-bg: var(--monko-paper);
  --marketing-ink: var(--monko-ink);
  --marketing-muted: var(--monko-muted);
  --marketing-faint: var(--monko-faint);
  --marketing-line: var(--monko-line);
  --marketing-accent: var(--monko-violet);
  --marketing-accent-hover: var(--monko-violet-deep);

  /* Footer / inverted band: solid ink, not a violet gradient. */
  --marketing-inverse-bg: var(--monko-ink);
  --marketing-inverse-ink: var(--monko-paper);

  --marketing-display-font: var(--font-display);
  --marketing-body-font: var(--font-body);
  --marketing-ui-font: var(--font-ui);

  /* Scale: bigger than editorial reading pages, same voice. */
  --marketing-type-caption: 0.8125rem;
  --marketing-type-body: 1.1875rem;
  --marketing-type-lead: 1.4375rem;
  --marketing-type-title: 3rem;
  --marketing-type-display: clamp(3.5rem, 7vw, 6.5rem);

  --marketing-measure: 62ch;
}