/* ==========================================================================
   Kairos Future — Colors & Type (Modern, 2026+)
   --------------------------------------------------------------------------
   This is the only system. Yellow + black + grey + white do all the visible
   work. The four "elements" colours from the 2018 manual (Sky / Earth / Fire
   / Spring) are kept ONLY as a reserved data-viz palette for charts and
   graphs — never for typography, chrome, badges, signals or shading boxes.
   For shading and accents, use steps of the yellow ramp (--kf-y-*).
   Rosa (#C83C6C) joins the four elements as a fifth chart-only colour.
   ========================================================================== */

/* Brand fonts — canonical, served from the project's local fonts/ directory.
   This stylesheet is self-sufficient: no Google Fonts dependency, no separate
   import required by consumers. */
@import url('fonts/fonts.css');

:root {
  /* ---- Yellow ramp — the single accent ---- */
  --kf-y-900: #7A5500;
  --kf-y-700: #C88A00;   /* Hover / press on light surfaces */
  --kf-y-500: #FAB20B;   /* Canonical brand yellow (PMS 136 in print) */
  --kf-y-300: #FBC35C;
  --kf-y-200: #FDDE9E;
  --kf-y-100: #FEF1D1;   /* Soft highlight, longer phrases */
  --kf-y-050: #FFF9E8;

  /* ---- Neutrals — warm, paper-leaning ---- */
  --kf-n-1000: #141211;   /* True ink, a hair warmer than pure black */
  --kf-n-900:  #231F20;   /* Logo ink — body text, display, dark surfaces */
  --kf-n-800:  #3A3637;
  --kf-n-700:  #56514F;   /* Secondary text */
  --kf-n-500:  #7C7673;   /* Muted / metadata */
  --kf-n-300:  #B5AFAA;
  --kf-n-200:  #D8D3CD;
  --kf-n-100:  #E8E3DD;   /* Hairline */
  --kf-n-050:  #F3EFE9;   /* Panel */
  --kf-n-025:  #FAF7F2;   /* Paper tint — warm off-white */
  --kf-n-000:  #FFFFFF;   /* Paper / primary surface */

  /* ---- Legacy ink-opacity aliases (kept so older components still resolve) */
  --kf-ink:        var(--kf-n-900);
  --kf-ink-80:     var(--kf-n-700);
  --kf-ink-60:     var(--kf-n-500);
  --kf-ink-40:     var(--kf-n-300);
  --kf-ink-20:     var(--kf-n-200);
  --kf-ink-10:     var(--kf-n-100);
  --kf-paper:      var(--kf-n-000);
  --kf-paper-tint: var(--kf-n-025);

  --kf-yellow:      var(--kf-y-500);
  --kf-yellow-soft: var(--kf-y-300);
  --kf-yellow-deep: var(--kf-y-700);

  /* ---- Data-viz reserve palette ----
     Use ONLY when rendering charts, graphs and small category marks.
     Never for body type, chrome, badges, signals, shading boxes or accents.
     If a design has no chart on it, none of these tokens should appear. */
  --kf-dv-sky:    #5FCEEA;   /* PMS 305  */
  --kf-dv-earth:  #6C491D;   /* PMS 1405 */
  --kf-dv-fire:   #FFA200;   /* PMS 1375 */
  --kf-dv-spring: #AAB300;   /* PMS 584  */
  --kf-dv-rosa:   #C83C6C;   /* Added 2026 — fifth chart series */

  /* ---- Semantic roles ---- */
  --fg-1:        var(--kf-n-900);
  --fg-2:        var(--kf-n-700);
  --fg-3:        var(--kf-n-500);
  --fg-disabled: var(--kf-n-300);
  --fg-on-dark:  var(--kf-n-000);
  --fg-accent:   var(--kf-y-500);

  --bg-1:       var(--kf-n-000);
  --bg-2:       var(--kf-n-025);
  --bg-3:       var(--kf-n-050);
  --bg-inverse: var(--kf-n-900);
  --bg-accent:  var(--kf-y-500);

  --border-hair:   var(--kf-n-100);
  --border-muted:  var(--kf-n-200);
  --border-strong: var(--kf-n-900);

  /* Signal colours — drawn from the yellow ramp + neutrals.
     Danger remains a desaturated red (the only non-neutral exception in UI). */
  --signal-info:    var(--kf-n-900);
  --signal-success: var(--kf-y-700);
  --signal-warning: var(--kf-y-500);
  --signal-danger:  #C03425;

  /* ---- Type families (canonical, 2026+) ----
     The 2018 graphic manual specified Big Caslon, Adobe Caslon Regular and
     Interstate. As of 2026 the brand has adopted the open Google-Fonts
     substitutes as the canonical typefaces — they license freely, ship on
     every platform, and render identically across web, print and Office.
       Display:  Playfair Display
       Serif:    EB Garamond
       Sans:     Barlow
       Mono:     IBM Plex Mono
  */
  --ff-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-serif:   "EB Garamond", Georgia, "Times New Roman", Times, serif;
  --ff-sans:    "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type scale ---- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;

  /* ---- Spacing (8-pt grid) ---- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radii — minimal, editorial ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---- Shadows — restrained ---- */
  --shadow-1: 0 1px 2px rgba(35, 31, 32, 0.06),
              0 1px 1px rgba(35, 31, 32, 0.04);
  --shadow-2: 0 4px 12px rgba(35, 31, 32, 0.08),
              0 1px 2px rgba(35, 31, 32, 0.05);
  --shadow-3: 0 18px 40px rgba(35, 31, 32, 0.12),
              0 2px 6px rgba(35, 31, 32, 0.06);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;

  /* ---- Layout ---- */
  --content-max:    1120px;
  --content-narrow: 720px;
}

/* ==========================================================================
   Semantic typography classes
   ========================================================================== */

.kf-eyebrow,
.kf-tagline {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.kf-h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.kf-h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.kf-h3 {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kf-h4 {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kf-preamble {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}

.kf-body {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.kf-body-sans {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.kf-caption {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.kf-quote {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* ---- Long-form prose helper ---- */
.kf-prose {
  font-family: var(--ff-serif);
  color: var(--fg-2);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.kf-prose h1 { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-4xl); line-height: var(--lh-tight); color: var(--fg-1); margin: 0 0 var(--sp-5); }
.kf-prose h2 { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--fg-1); margin: var(--sp-7) 0 var(--sp-4); }
.kf-prose h3 { font-family: var(--ff-sans); font-weight: 300; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--fg-1); margin: var(--sp-6) 0 var(--sp-3); }
.kf-prose p  { margin: 0 0 var(--sp-4); }
.kf-prose a  { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kf-prose a:hover { color: var(--kf-y-700); }
.kf-prose blockquote {
  border-left: 4px solid var(--kf-y-500);
  margin: var(--sp-6) 0;
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--fg-1);
}

/* ==========================================================================
   Shading boxes — the signature accent
   Solid yellow rectangles behind a word or phrase. Always a step of the
   yellow ramp; never the data-viz colours. .kf-shade--ink is for inverse use.
   ========================================================================== */
.kf-shade           { display: inline-block; padding: 2px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kf-shade--yellow,
.kf-shade--y-500    { background: var(--kf-y-500); color: var(--kf-n-900); }
.kf-shade--y-300    { background: var(--kf-y-300); color: var(--kf-n-900); }
.kf-shade--y-200    { background: var(--kf-y-200); color: var(--kf-n-900); }
.kf-shade--y-100    { background: var(--kf-y-100); color: var(--kf-n-900); }
.kf-shade--y-700    { background: var(--kf-y-700); color: var(--kf-n-000); }
.kf-shade--ink      { background: var(--kf-n-900); color: var(--kf-n-000); }