/* ==========================================================================
   KnowToYes design tokens, v1.1, 2026-09-21
   The canonical source for every colour, type and spacing value in the
   KnowToYes system. Reference the custom properties; never a raw hex.

   Companion to: KnowToYes Design Standard v1.1
                 KnowToYes Band, the application layer v1.0

   v1.1 adds the Band application tokens in section 10. Nothing in
   sections 1 to 9 changed from v1.0.
   ========================================================================== */

:root {
  /* ---- 1. Blue ramp: the spine. Every KTY blue is a step here. ---- */
  --kty-blue-900: #021D2D;  /* 17.27:1 on white */
  --kty-blue-800: #022C43;  /* 14.54:1 */
  --kty-blue-700: #033A59;  /* 11.98:1 */
  --kty-blue-600: #044970;  /*  9.58:1 */
  --kty-blue-500: #056195;  /*  6.67:1  <- the logo blue */
  --kty-blue-400: #2374A2;  /*  5.13:1 */
  --kty-blue-300: #8EB8CF;  /*  2.12:1  not text on light */
  --kty-blue-200: #C8DCE8;  /*  1.41:1  not text */
  --kty-blue-100: #E6EFF4;  /*  1.17:1  not text */
  --kty-blue-050: #F5F9FB;  /*  1.06:1  not text */

  /* ---- 2. Green: the signal, not a second brand colour ---- */
  --kty-green-deep:   #67CC01; /* logo gradient dark stop */
  --kty-green-core:   #7ACF06; /* flat signal; fills only, never text on light */
  --kty-green-bright: #A0E114; /* dark grounds only, >= blue-700 */
  --kty-green-text:   #437203; /* 5.76:1, the only green allowed as text on light */

  /* ---- 3. Neutrals, cooled toward the blue ---- */
  --kty-ink:   #131A21;  /* 17.54:1 */
  --kty-slate: #55636E;  /*  6.18:1 */
  --kty-line:  #DCE3E9;
  --kty-cloud: #F2F5F8;
  --kty-white: #FFFFFF;

  /* ---- 4. Functional states. Never used as chart series. ---- */
  --kty-approved: #437203;  --kty-approved-fill: #EDF7DC;
  --kty-pending:  #8A5A00;  --kty-pending-fill:  #FCF3E2;
  --kty-denied:   #A8201A;  --kty-denied-fill:   #FBEAE8;
  --kty-none:     #55636E;  --kty-none-fill:     #F2F5F8;

  /* ---- 5. Chart: categorical, fixed order, never cycled (light mode) ---- */
  --kty-series-1: #056195;  /* blue   */
  --kty-series-2: #5C9C00;  /* green  */
  --kty-series-3: #0096A8;  /* teal   */
  --kty-series-4: #C25E00;  /* orange */
  --kty-series-5: #8A4FA8;  /* violet */
  --kty-series-other: #55636E;
  /* All-pairs forms (scatter, bubble, choropleth, small multiples): slots 1-3 only. */

  /* ---- 6. Chart: sequential blue, light -> dark (light mode) ---- */
  --kty-seq-1: #8EB8CF; --kty-seq-2: #6AA0BF; --kty-seq-3: #3F82AC;
  --kty-seq-4: #056195; --kty-seq-5: #033A59;

  /* ---- 7. Chart: diverging, blue <-> orange, neutral midpoint ---- */
  --kty-div-neg: #056195; --kty-div-mid: #F2F5F8; --kty-div-pos: #C25E00;

  /* ---- 8. Map ---- */
  --kty-map-ground: #021D2D;  /* map canvas */
  --kty-map-nodata: #0F2A3C;  /* polygon with no coverage */
  --kty-map-border: #033A59;
  --kty-map-halo:   #021D2D;  /* 3px label halo */

  /* ---- 9a. Semantic surfaces and text (light) ---- */
  --kty-surface:        #FFFFFF;
  --kty-surface-raised: #F5F9FB;
  --kty-surface-sunken: #F2F5F8;
  --kty-surface-dark:   #022C43;
  --kty-text:           #131A21;
  --kty-text-secondary: #55636E;
  --kty-text-heading:   #033A59;
  --kty-link:           #056195;
  --kty-link-hover:     #044970;
  --kty-border:         #DCE3E9;
  --kty-focus:          #056195;

  /* ---- 9b. Type ---- */
  --kty-font-display: "Archivo", Arial, sans-serif;  /* width axis set per use */
  --kty-font-ui:      "Archivo", Arial, sans-serif;
  --kty-font-prose:   "Source Serif 4", Georgia, serif;
  --kty-font-data:    "IBM Plex Mono", ui-monospace, monospace;

  --kty-size-h1:    clamp(32px, 4.2vw, 62px);
  --kty-size-h2:    28px;
  --kty-size-h3:    21px;
  --kty-size-prose: 19px;
  --kty-size-ui:    17px;
  --kty-size-data:  15px;
  --kty-size-small: 14px;
  --kty-size-label: 12px;

  --kty-leading-tight: 1.06;
  --kty-leading-ui:    1.6;
  --kty-leading-prose: 1.7;
  --kty-tracking-label: 0.08em;
  --kty-measure: 68ch;

  /* ---- 9c. Spacing: nothing in between ---- */
  --kty-space-1: 4px;  --kty-space-2: 8px;  --kty-space-3: 12px;
  --kty-space-4: 16px; --kty-space-5: 24px; --kty-space-6: 32px;
  --kty-space-7: 48px; --kty-space-8: 64px; --kty-space-9: 96px;

  /* ---- 9d. Radius: the record is square, the interface is rounded ---- */
  --kty-radius-record: 0;      /* tables, section bands, charts, maps */
  --kty-radius-ui:     6px;    /* cards, buttons, inputs, callouts */
  --kty-radius-pill:   999px;  /* status pills, coverage badges */

  --kty-transition: 150ms ease;
  /* No shadows. No gradients outside the logo disc. */

  /* ==== 10. Band application tokens (v1.1) ==================================
     Band is the selected visual direction. Three elements carry it:
     a Green Core spine on the leading edge of every dark element, a Blue 800
     band carrying the section number and title, and a rail under the band
     carrying the subject and the pull date.
     ======================================================================= */

  /* Spine widths by medium */
  --kty-spine: var(--kty-green-core);
  --kty-spine-screen:      12px;  /* web page, portal */
  --kty-spine-card:        12px;  /* business card */
  --kty-spine-signature:   10px;  /* email signature */
  --kty-spine-letterhead:  16px;  /* letterhead */
  --kty-spine-slide:       18px;  /* full-bleed deck slide */
  --kty-spine-slide-band:  12px;  /* banded content slide */
  --kty-spine-cover:       26px;  /* report cover, letter */
  --kty-spine-interior:    18px;  /* report interior page */
  --kty-spine-banner:      14px;  /* retractable banner */

  /* Band and rail */
  --kty-band-bg:          var(--kty-blue-800);
  --kty-band-number:      var(--kty-blue-300);
  --kty-band-title:       var(--kty-white);
  --kty-band-height:      66px;   /* web */
  --kty-band-height-sm:   54px;   /* dense contexts, report interior */
  --kty-band-pad-x:       var(--kty-space-7);
  --kty-rail-bg:          transparent;
  --kty-rail-text:        var(--kty-slate);
  --kty-rail-rule:        var(--kty-blue-200);
  --kty-rail-pad-y:       10px;

  /* Display widths (Archivo variable width axis, 62 to 125) */
  --kty-wdth-expanded: 125%;  /* cover titles, deck title slides, banner */
  --kty-wdth-wide:     118%;  /* web H1, deck section slides */
  --kty-wdth-mid:      112%;  /* leave-behind headlines, CTA */
  --kty-wdth-normal:   100%;  /* everything else */

  /* Display tracking */
  --kty-tracking-display: -0.025em;
  --kty-tracking-h1:      -0.03em;
  --kty-tracking-h2:      -0.015em;

  /* Header and footer heights */
  --kty-header-height:    76px;
  --kty-header-height-sm: 76px;  /* the horizontal lockup needs 38px + 1/2 D clear space */
}

/* ---- Dark mode: selected steps from the same ramps, not an inversion ---- */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --kty-surface:        #021D2D;
    --kty-surface-raised: #022C43;
    --kty-surface-sunken: #011622;
    --kty-text:           #E6EFF4;
    --kty-text-secondary: #8EB8CF;
    --kty-text-heading:   #FFFFFF;
    --kty-link:           #A0E114;
    --kty-link-hover:     #7ACF06;
    --kty-border:         #033A59;
    --kty-focus:          #A0E114;

    --kty-band-bg:     #033A59;
    --kty-band-number: #8EB8CF;
    --kty-rail-rule:   #033A59;
    --kty-rail-text:   #8EB8CF;

    --kty-series-1: #136FA7; --kty-series-2: #60A106; --kty-series-3: #14A4B7;
    --kty-series-4: #CD650A; --kty-series-5: #A765C9; --kty-series-other: #8EB8CF;

    --kty-seq-1: #C8DCE8; --kty-seq-2: #8EB8CF; --kty-seq-3: #4C90BB;
    --kty-seq-4: #1B6FA4; --kty-seq-5: #0B5480;
    --kty-div-mid: #22323F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --kty-surface:        #021D2D;
  --kty-surface-raised: #022C43;
  --kty-surface-sunken: #011622;
  --kty-text:           #E6EFF4;
  --kty-text-secondary: #8EB8CF;
  --kty-text-heading:   #FFFFFF;
  --kty-link:           #A0E114;
  --kty-link-hover:     #7ACF06;
  --kty-border:         #033A59;
  --kty-focus:          #A0E114;

  --kty-band-bg:     #033A59;
  --kty-band-number: #8EB8CF;
  --kty-rail-rule:   #033A59;
  --kty-rail-text:   #8EB8CF;

  --kty-series-1: #136FA7; --kty-series-2: #60A106; --kty-series-3: #14A4B7;
  --kty-series-4: #CD650A; --kty-series-5: #A765C9; --kty-series-other: #8EB8CF;

  --kty-seq-1: #C8DCE8; --kty-seq-2: #8EB8CF; --kty-seq-3: #4C90BB;
  --kty-seq-4: #1B6FA4; --kty-seq-5: #0B5480;
  --kty-div-mid: #22323F;
}