/* Generated copy of sites/shared/tokens.css — edit the source, then run scripts/sync_kit.js */
/* ==========================================================================
   KolWrite / KolHive shared design tokens
   --------------------------------------------------------------------------
   One palette for kolwrite.com, kolhive.com and console.kolwrite.com, taken
   from the apps: warm paper and ink in light, charcoal in dark, and a single
   amber accent that is only ever spent on the primary action or a live state.

   Themes resolve in this order:
     1. prefers-color-scheme            (the visitor's system setting)
     2. html[data-theme="light"|"dark"] (an explicit choice, set by chrome.js)

   Every value below is a token. Properties never hard-code a colour, a radius,
   a duration or a shadow, so a page restyles by swapping this file alone.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Version -------------------------------------------------------- *
   * Bumped whenever a consumer could be surprised by a change (the switch
   * to self-hosted fonts, a new required markup hook). Read it with
   *   getComputedStyle(document.documentElement).getPropertyValue("--kol-kit-version")
   * or as KolChrome.version, and keep the two in step. */
  --kol-kit-version: "2026.10.06.1";

  /* --- Surfaces ------------------------------------------------------- */
  --kol-paper: #f7f5f0;        /* page */
  --kol-surface: #ffffff;      /* cards, header, menus */
  --kol-sunk: #efebe2;         /* quiet fill: table heads, code, chips */
  --kol-line: #e3dfd5;         /* the one hairline */
  --kol-line-strong: #cec9bc;  /* the same hairline, asserted */
  --kol-zebra: #fbfaf7;        /* every other table row, and nothing else */

  /* --- Ink ------------------------------------------------------------ */
  --kol-ink: #17181a;          /* 16.5:1 on paper */
  --kol-ink-muted: #5b5c60;    /* 6.0:1  — body copy, labels */
  --kol-ink-faint: #6b6c70;    /* 4.7:1  — captions, meta (AA minimum) */
  --kol-ink-invert: #f7f5f0;

  /* --- The one accent ------------------------------------------------- */
  --kol-accent: #ffb020;
  --kol-accent-hover: #f0a413;
  --kol-accent-ink: #17181a;   /* 9.7:1 on accent */
  --kol-accent-quiet: #fff4dd; /* live-state wash only */
  --kol-focus: #17181a;        /* focus ring core, doubled with accent */

  /* --- Elevation: exactly one level ----------------------------------- */
  --kol-shadow: 0 1px 2px rgba(23, 24, 26, 0.04), 0 10px 30px rgba(23, 24, 26, 0.07);

  /* --- Radii ---------------------------------------------------------- */
  --kol-radius-sm: 8px;
  --kol-radius: 12px;
  --kol-radius-lg: 18px;
  --kol-radius-pill: 999px;

  /* --- Layout: 12 columns, 1200px of content -------------------------- */
  --kol-max: 1200px;
  --kol-measure: 62ch;         /* reading width for prose */
  --kol-gutter: 16px;
  --kol-gap: 20px;
  --kol-header-h: 60px;
  --kol-btn-icon-size: 40px;   /* .kol-btn-icon; 32px with .kol-btn-sm */

  /* --- Space scale ---------------------------------------------------- */
  --kol-space-1: 4px;
  --kol-space-2: 8px;
  --kol-space-3: 12px;
  --kol-space-4: 16px;
  --kol-space-5: 24px;
  --kol-space-6: 32px;
  --kol-space-7: 48px;
  --kol-space-8: 64px;
  --kol-space-9: 96px;
  --kol-section-y: 64px;       /* section rhythm, grows with the viewport */

  /* --- Type ----------------------------------------------------------- */
  --kol-font-sans: "Inter", "Assistant", "Noto Sans Arabic", ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --kol-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --kol-text-xs: 0.75rem;
  --kol-text-sm: 0.875rem;
  --kol-text-base: 1rem;
  --kol-text-md: 1.0625rem;
  --kol-text-lg: 1.25rem;
  --kol-text-xl: 1.5rem;
  --kol-text-2xl: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
  --kol-text-3xl: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  --kol-text-hero: clamp(2.125rem, 1.3rem + 4.2vw, 3.75rem);

  --kol-leading-tight: 1.08;
  --kol-leading-snug: 1.3;
  --kol-leading: 1.6;
  --kol-tracking-tight: -0.02em;
  --kol-tracking-wide: 0.08em;

  /* --- Motion: 150–200ms, and nothing else ---------------------------- */
  --kol-motion-fast: 150ms;
  --kol-motion: 180ms;
  --kol-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Dark: charcoal, never navy and never pure black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kol-paper: #101112;
    --kol-surface: #17181a;
    --kol-sunk: #1d1f21;
    --kol-line: #2a2c2e;
    --kol-line-strong: #3a3d40;
    --kol-zebra: #191b1d;

    --kol-ink: #f3f1ec;
    --kol-ink-muted: #a3a19b;
    --kol-ink-faint: #8a8882;
    --kol-ink-invert: #101112;

    --kol-accent-quiet: #2b2216;
    --kol-focus: #f3f1ec;

    --kol-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --kol-paper: #101112;
  --kol-surface: #17181a;
  --kol-sunk: #1d1f21;
  --kol-line: #2a2c2e;
  --kol-line-strong: #3a3d40;
  --kol-zebra: #191b1d;

  --kol-ink: #f3f1ec;
  --kol-ink-muted: #a3a19b;
  --kol-ink-faint: #8a8882;
  --kol-ink-invert: #101112;

  --kol-accent-quiet: #2b2216;
  --kol-focus: #f3f1ec;

  --kol-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Wider viewports get more air, not more columns of text. */
@media (min-width: 768px) {
  :root {
    --kol-gutter: 24px;
    --kol-gap: 24px;
    --kol-header-h: 68px;
    --kol-section-y: 88px;
  }
}

@media (min-width: 1024px) {
  :root {
    --kol-gutter: 32px;
    --kol-section-y: 104px;
  }
}