/* ==========================================================================
   beehave — design tokens
   Source of truth for color, type, space, radius, elevation.
   Rules and measured contrast: design/brand/colors.md

   Layer 1  primitives      --honey-500, --comb-100 …      (raw palette, never used directly in code)
   Layer 2  semantic        --color-text, --color-brand …  (what product code uses)
   Layer 3  components      --btn-*, --card-* …            (optional helpers)

   Light theme is the default (no media query needed).
   Dark theme:  [data-theme="dark"]  or the OS preference.
   ========================================================================== */

/* ==========================================================================
   FONTS — self-hosted from design/brand/fonts/ (no Google Fonts call at runtime:
   "wax = our own infrastructure", and an enterprise app must not leak visitor
   IPs to a third party).

   Serve this file with the fonts folder next to it, i.e. /brand/tokens.css +
   /brand/fonts/*.woff2, so these relative URLs resolve.
   Licenses: fonts/Summerbee-README.txt (personal-use only!), OFL-*.txt.
   ========================================================================== */

/* Display: hand-drawn marker. One weight, headlines only, never body. */
@font-face {
  font-family: "Summerbee";
  src: url("fonts/Summerbee-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Editorial: soft old-style serif, variable (opsz, wght, SOFT, WONK). */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Text + UI: the workhorse. */
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Provenance: who said what, when. Addresses, ids, timestamps, hashes. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- 1.1 HONEY
     Hue locked at 35deg. Honey is a FILL/STROKE color:
     text on light must use honey-700, text on dark honey-400. */
  --honey-50:  #FFF8EC;
  --honey-100: #FDEDCF;
  --honey-200: #FBDCA1;
  --honey-300: #F8C46B;
  --honey-400: #F2A93C;
  --honey-500: #E8901A;  /* brand */
  --honey-600: #C9760C;  /* pressed fill only (3.45:1 on white) */
  --honey-700: #A05B08;  /* honey as TEXT on light, 5.26:1 */
  --honey-800: #75420A;
  --honey-900: #4E2C0A;

  /* ---------------------------------------------------------------- 1.2 COMB
     Warm neutral (hue 38deg, low chroma): the "paper" of the product. */
  --comb-0:   #FFFFFF;
  --comb-50:  #FBF7F0;
  --comb-100: #F3ECE0;
  --comb-200: #E7DCCB;
  --comb-300: #D5C6AE;
  --comb-400: #B7A48A;
  --comb-500: #93816A;
  --comb-600: #6F6150;  /* secondary text on light, 5.11:1 */
  --comb-700: #514840;
  --comb-800: #332C27;
  --comb-900: #211C19;
  --comb-950: #17120F;

  /* ------------------------------------------------------------ 1.3 PROPOLIS
     Warm black + resin browns. Ink, security, seals. */
  --propolis-100: #F0E7DD;
  --propolis-300: #B8A08C;
  --propolis-500: #8A4B22;
  --propolis-600: #6E3A1A;
  --propolis-700: #4A2A16;
  --propolis-900: #221A14;  /* light-theme ink, 16.04:1 on comb-50 */

  /* -------------------------------------------------------------- 1.4 FIELDS
     Accents lifted from the painted hives, darkened until they pass AA on white. */
  --sky-100:    #DCF1FB;
  --sky-500:    #0E8FD0;
  --sky-600:    #0B6FA3;  /* 5.50:1 on white */
  --violet-100: #EFE9FB;
  --violet-500: #7B57C9;
  --violet-600: #5E3DA6;  /* 7.79:1 on white */
  --rose-100:   #FBE3EE;
  --rose-500:   #C2417A;
  --rose-600:   #A02B60;  /* 6.98:1 on white */
  --leaf-100:   #EAF3D2;
  --leaf-500:   #6E8C2A;
  --leaf-700:   #3F5410;  /* 7.34:1 on leaf-100 */
  --teal-500:   #1F8A7A;  /* 4.22:1 — large text / graphics only */
  --teal-700:   #136058;  /* 7.39:1 */
  --clay-500:   #B5643C;  /* 4.33:1 — large text only */
  --clay-700:   #8A3B1E;  /* 7.71:1 */

  /* Folk-art brights from the reference photo: ILLUSTRATION ONLY, never UI chrome. */
  --folk-lime:   #F0FABE;
  --folk-violet: #8258CD;
  --folk-rose:   #D65A89;
  --folk-sky:    #0194DF;
  --folk-gold:   #FCE038;
  --folk-apricot:#FCC573;
  --folk-black:  #14161E;

  /* ------------------------------------------------------------- 2. SEMANTIC
     Product code uses only these. */
  /* surfaces */
  --color-bg:             var(--comb-50);    /* #FBF7F0 app background */
  --color-bg-sunken:      var(--comb-200);   /* gutters, wells */
  --color-surface:        var(--comb-0);     /* primary card (white paper) */
  --color-surface-raised: var(--comb-100);   /* Wax: secondary panels */
  --color-surface-royal:  var(--honey-50);   /* Royal jelly: best-evidenced view, onboarding */
  --color-surface-inverse:var(--propolis-900);
  --color-surface-overlay:rgb(34 26 20 / 0.45); /* scrim */

  /* lines */
  --color-line:        var(--comb-200);
  --color-line-strong: var(--comb-300);
  --color-line-inverse:var(--comb-800);

  /* text */
  --color-text:          var(--propolis-900); /* 16.04:1 */
  --color-text-muted:    var(--comb-600);     /* 5.62:1  */
  --color-text-subtle:   var(--comb-500);     /* 3.9:1 — non-essential only */
  --color-text-inverse:  var(--comb-50);
  --color-text-on-brand: var(--propolis-900); /* ink on honey: 8.58:1 */

  /* brand */
  --color-brand:        var(--honey-500);
  --color-brand-hover:  var(--honey-600);   /* pressed fill */
  --color-brand-soft:   var(--honey-100);
  --color-brand-text:   var(--honey-700);   /* honey as text/link on light */
  --color-focus:        var(--honey-500);

  /* bee-term semantics (see colors.md §5) */
  --color-honey:        var(--honey-500);   /* outcome: revenue, won deals */
  --color-nectar:       var(--honey-300);   /* raw unripe input */
  --color-wax:          var(--comb-100);    /* our own infrastructure */
  --color-royal-jelly:  var(--honey-50);    /* answers you get first and always */
  --color-security:     var(--propolis-600);/* guards, scanning, zero trust */
  --color-knowledge:    var(--violet-600);  /* pollen: knowledge that grows people */
  --color-knowledge-soft:var(--violet-100); /* bee bread: ripened, stored */
  --color-field:        var(--sky-600);     /* the outside: client areas */
  --color-highlight:    #F9D423;            /* waggle dance: "look here" (never text) */
  --color-health:       var(--teal-500);    /* water: heartbeats */
  --color-disabled:     var(--comb-400);    /* smoke */

  /* status */
  --color-success:      var(--leaf-700);
  --color-success-soft: var(--leaf-100);
  --color-warning:      var(--honey-700);
  --color-warning-soft: var(--honey-100);
  --color-danger:       var(--rose-600);
  --color-danger-soft:  var(--rose-100);
  --color-info:         var(--sky-600);
  --color-info-soft:    var(--sky-100);
  --color-conflict:     var(--rose-500);    /* contradiction in evidence, not an error */

  /* evidence confidence (fill level in a comb cell) */
  --evidence-track:     #E3D3B4;
  --evidence-fill:      var(--honey-500);
  --evidence-fill-high: var(--honey-700);
  --evidence-unverified:var(--comb-400);

  /* charts (categorical, 6 max) */
  --chart-1: var(--honey-500);
  --chart-2: var(--sky-600);
  --chart-3: var(--violet-600);
  --chart-4: var(--rose-600);
  --chart-5: var(--leaf-700);
  --chart-6: var(--clay-700);
  --chart-grid: var(--comb-200);
  --chart-axis: var(--comb-600);

  /* area identity (8 fixed slots; pair with an icon, never color alone) */
  --area-1: var(--honey-700);
  --area-2: var(--sky-600);
  --area-3: var(--violet-600);
  --area-4: var(--rose-600);
  --area-5: var(--leaf-700);
  --area-6: var(--propolis-600);
  --area-7: var(--teal-700);
  --area-8: var(--clay-700);

  /* ---------------------------------------------------------------- 3. TYPE
     Three families, three jobs (see design/brand/typography.md):
       display  Summerbee      headlines, wordmark, marketing only
       serif    Fraunces       H1–H3, pull quotes, insight statements
       sans     Source Sans 3  body, UI, tables, forms  <- everything else
     Mono is optional and reserved for provenance. */
  --font-display: "Summerbee", "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;
  --font-serif:   "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* size scale (UI steps are fixed, hero steps are fluid) */
  --text-2xs: 0.6875rem; /* 11px  — mono meta, dense tables */
  --text-xs:  0.75rem;   /* 12px  — captions, badges */
  --text-sm:  0.8125rem; /* 13px  — labels, table body */
  --text-md:  0.9375rem; /* 15px  — UI default */
  --text-lg:  1.0625rem; /* 17px  — reading body */
  --text-xl:  1.3125rem; /* 21px  — h3 */
  --text-2xl: 1.625rem;  /* 26px  — h2 */
  --text-3xl: 2.125rem;  /* 34px  — h1 */
  --text-4xl: 2.75rem;   /* 44px  — display */
  --text-5xl: 3.5rem;    /* 56px  — hero display */

  /* fluid display sizes (Summerbee needs room to breathe) */
  --text-display-sm: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --text-display-md: clamp(2.125rem, 1.2rem + 3.6vw, 3.25rem);
  --text-display-lg: clamp(2.5rem, 1rem + 6vw, 4.5rem);
  --text-h1:         clamp(1.75rem, 1.3rem + 2vw, 2.375rem);

  --leading-none:   1;
  --leading-tight:  1.12;
  --leading-snug:   1.3;
  --leading-body:   1.6;
  --leading-loose:  1.75;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --tracking-display: 0.005em;  /* Summerbee is already narrow; never tighten it */
  --tracking-tight:  -0.015em;  /* Fraunces at large sizes */
  --tracking-normal: 0;
  --tracking-wide:    0.04em;   /* uppercase labels, table headers */

  --measure: 68ch;   /* max line length for prose */
  --measure-tight: 46ch; /* insight / pull quote */

  /* --------------------------------------------------------------- 4. SPACE
     4px base; spacing is deliberately generous (evidence needs air). */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */

  /* -------------------------------------------------------------- 5. SHAPE */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------- 6. ELEVATION
     Warm shadows (propolis, not black) — comb cells sit on each other, they don't float. */
  --shadow-xs: 0 1px 2px rgb(34 26 20 / 0.06);
  --shadow-sm: 0 1px 2px rgb(34 26 20 / 0.06), 0 2px 6px rgb(34 26 20 / 0.05);
  --shadow-md: 0 2px 4px rgb(34 26 20 / 0.06), 0 6px 16px rgb(34 26 20 / 0.08);
  --shadow-lg: 0 8px 24px rgb(34 26 20 / 0.10), 0 2px 6px rgb(34 26 20 / 0.06);
  --ring: 0 0 0 3px rgb(232 144 26 / 0.35);   /* honey focus ring */
  --ring-danger: 0 0 0 3px rgb(160 43 96 / 0.30);

  /* ------------------------------------------------------------ 7. MOTION
     Bees are quick; the product should not be. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --dur-slow: 320ms;

  /* ------------------------------------------------------ 8. COMPONENT HOOKS */
  --btn-primary-bg:        var(--honey-400);
  --btn-primary-bg-hover:  var(--honey-500);
  --btn-primary-bg-active: var(--honey-600);
  --btn-primary-fg:        var(--propolis-900);

  --btn-secondary-bg:      var(--comb-0);
  --btn-secondary-fg:      var(--propolis-900);
  --btn-secondary-border:  var(--comb-300);

  --input-bg:     var(--comb-0);
  --input-border: var(--comb-300);
  --input-fg:     var(--propolis-900);
  --input-placeholder: var(--comb-500);

  --table-header-bg: var(--comb-100);
  --table-stripe:    rgb(231 220 203 / 0.45);

  --code-bg:   var(--comb-100);
  --code-fg:   var(--propolis-700);
  --select-bg: var(--honey-200);
  --select-fg: var(--propolis-900);
}

/* ==========================================================================
   DARK THEME — propolis night
   Surface is warm black; honey-400 replaces honey-700 for text.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:              var(--comb-950);
  --color-bg-sunken:       #100C0A;
  --color-surface:         var(--comb-900);
  --color-surface-raised:  #2A211B;
  --color-surface-royal:   #2C2118;
  --color-surface-inverse: var(--comb-50);
  --color-surface-overlay: rgb(0 0 0 / 0.6);

  --color-line:         var(--comb-800);
  --color-line-strong:  var(--comb-700);
  --color-line-inverse: var(--comb-200);

  --color-text:          var(--comb-100);   /* #F3ECE0 → 15.83:1 */
  --color-text-muted:    var(--comb-400);   /* #B7A48A → 7.12:1  */
  --color-text-subtle:   var(--comb-500);
  --color-text-inverse:  var(--propolis-900);
  --color-text-on-brand: var(--propolis-900);

  --color-brand:       var(--honey-400);
  --color-brand-hover: var(--honey-300);
  --color-brand-soft:  #3A2A16;
  --color-brand-text:  var(--honey-400);    /* 9.31:1 */
  --color-focus:       var(--honey-400);

  --color-honey:         var(--honey-400);
  --color-nectar:        var(--honey-300);
  --color-wax:           #2A211B;
  --color-royal-jelly:   #2C2118;
  --color-security:      var(--propolis-300);
  --color-knowledge:     #B39CF0;
  --color-knowledge-soft:#2B2340;
  --color-field:         #6FB9E6;
  --color-highlight:     #F9D423;
  --color-health:        #4BB8A6;
  --color-disabled:      var(--comb-700);

  --color-success:      #A9C96A;
  --color-success-soft: #24300F;
  --color-warning:      var(--honey-300);
  --color-warning-soft: #3A2A16;
  --color-danger:       #E87FA5;
  --color-danger-soft:  #3A1424;
  --color-info:         #6FB9E6;
  --color-info-soft:    #12242E;
  --color-conflict:     #E87FA5;

  --evidence-track: #33291F;
  --evidence-fill:  var(--honey-400);
  --evidence-fill-high: var(--honey-300);
  --evidence-unverified: var(--comb-600);

  --chart-grid: var(--comb-800);
  --chart-axis: var(--comb-400);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.35);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.5), 0 6px 16px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
  --ring: 0 0 0 3px rgb(242 169 60 / 0.45);

  --btn-primary-bg:        var(--honey-400);
  --btn-primary-bg-hover:  var(--honey-300);
  --btn-primary-bg-active: var(--honey-500);
  --btn-primary-fg:        var(--propolis-900);

  --btn-secondary-bg:      transparent;
  --btn-secondary-fg:      var(--comb-100);
  --btn-secondary-border:  var(--comb-700);

  --input-bg:     var(--comb-950);
  --input-border: var(--comb-700);
  --input-fg:     var(--comb-100);
  --input-placeholder: var(--comb-500);

  --table-header-bg: var(--comb-800);
  --table-stripe:    rgb(255 255 255 / 0.03);

  --code-bg:   #241C17;
  --code-fg:   var(--honey-100);
  --select-bg: #6B4A12;
  --select-fg: var(--comb-50);
}

/* Follow the OS unless the app has pinned a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg:              var(--comb-950);
    --color-bg-sunken:       #100C0A;
    --color-surface:         var(--comb-900);
    --color-surface-raised:  #2A211B;
    --color-surface-royal:   #2C2118;
    --color-surface-inverse: var(--comb-50);
    --color-surface-overlay: rgb(0 0 0 / 0.6);

    --color-line:         var(--comb-800);
    --color-line-strong:  var(--comb-700);
    --color-line-inverse: var(--comb-200);

    --color-text:          var(--comb-100);
    --color-text-muted:    var(--comb-400);
    --color-text-subtle:   var(--comb-500);
    --color-text-inverse:  var(--propolis-900);
    --color-text-on-brand: var(--propolis-900);

    --color-brand:       var(--honey-400);
    --color-brand-hover: var(--honey-300);
    --color-brand-soft:  #3A2A16;
    --color-brand-text:  var(--honey-400);
    --color-focus:       var(--honey-400);

    --color-honey:         var(--honey-400);
    --color-nectar:        var(--honey-300);
    --color-wax:           #2A211B;
    --color-royal-jelly:   #2C2118;
    --color-security:      var(--propolis-300);
    --color-knowledge:     #B39CF0;
    --color-knowledge-soft:#2B2340;
    --color-field:         #6FB9E6;
    --color-highlight:     #F9D423;
    --color-health:        #4BB8A6;
    --color-disabled:      var(--comb-700);

    --color-success:      #A9C96A;
    --color-success-soft: #24300F;
    --color-warning:      var(--honey-300);
    --color-warning-soft: #3A2A16;
    --color-danger:       #E87FA5;
    --color-danger-soft:  #3A1424;
    --color-info:         #6FB9E6;
    --color-info-soft:    #12242E;
    --color-conflict:     #E87FA5;

    --evidence-track: #33291F;
    --evidence-fill:  var(--honey-400);
    --evidence-fill-high: var(--honey-300);
    --evidence-unverified: var(--comb-600);

    --chart-grid: var(--comb-800);
    --chart-axis: var(--comb-400);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.35);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.5), 0 6px 16px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
    --ring: 0 0 0 3px rgb(242 169 60 / 0.45);

    --btn-primary-bg:        var(--honey-400);
    --btn-primary-bg-hover:  var(--honey-300);
    --btn-primary-bg-active: var(--honey-500);
    --btn-primary-fg:        var(--propolis-900);

    --btn-secondary-bg:      transparent;
    --btn-secondary-fg:      var(--comb-100);
    --btn-secondary-border:  var(--comb-700);

    --input-bg:     var(--comb-950);
    --input-border: var(--comb-700);
    --input-fg:     var(--comb-100);
    --input-placeholder: var(--comb-500);

    --table-header-bg: var(--comb-800);
    --table-stripe:    rgb(255 255 255 / 0.03);

    --code-bg:   #241C17;
    --code-fg:   var(--honey-100);
    --select-bg: #6B4A12;
    --select-fg: var(--comb-50);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 100%; /* 16px — all rem tokens are measured against this */
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Headings: Fraunces carries H1–H3. Summerbee is NOT a heading style by default —
   it is opt-in via .display-* on landing/marketing/empty states, because a
   hand-drawn face cannot hold a dense admin screen. */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1);   font-weight: 600; line-height: 1.1; }
h2 { font-size: var(--text-2xl);  font-weight: 600; line-height: var(--leading-snug); }
h3 { font-size: var(--text-xl);   font-weight: 600; line-height: var(--leading-snug); }

/* H4 and below stay in the text face: the serif has done its job by H3. */
h4, h5, h6 {
  font-family: var(--font-sans);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
h4 { font-size: var(--text-md); font-weight: 700; }
h5 { font-size: var(--text-sm); font-weight: 700; }
h6 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

body { font-size: var(--text-md); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

blockquote {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-security);
  max-width: var(--measure-tight);
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-brand);
}
blockquote p { max-width: none; }

ul, ol { max-width: var(--measure); padding-left: var(--space-5); }
li { margin-bottom: var(--space-1); }

/* Opt-in display styles — Summerbee. */
.display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.display-lg { font-size: var(--text-display-lg); }
.display-md { font-size: var(--text-display-md); }
.display-sm { font-size: var(--text-display-sm); line-height: 1.05; }

/* Section label / eyebrow: small caps in the text face. */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-brand-text);
  margin: 0 0 var(--space-2);
}

/* Provenance line: mono, quiet, never bold. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
/* keep a timestamp or an e-mail in one piece when a line wraps */
.meta span, .meta a { white-space: nowrap; }
.meta a { color: inherit; }

/* Numbers in tables and stats align. */
.tabular { font-variant-numeric: tabular-nums; }

a {
  color: var(--color-brand-text);
  text-decoration-color: color-mix(in srgb, var(--color-brand-text) 40%, transparent);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }

::selection {
  background: var(--select-bg);
  color: var(--select-fg);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-5) 0;
}

/* ==========================================================================
   UTILITIES — the few that keep product code from re-inventing colors
   ========================================================================== */

/* Honeycomb texture. Decorative only: never behind body text.
   Uses a mask so the pattern color follows the theme. */
.has-comb-texture { position: relative; isolation: isolate; }
.has-comb-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-text);
  opacity: 0.03;
  -webkit-mask-image: var(--comb-mask);
          mask-image: var(--comb-mask);
  -webkit-mask-size: 28px 49px;
          mask-size: 28px 49px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  pointer-events: none;
}

:root {
  --comb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23000' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8.01L27.99 33.5H28v2.31h-.01L17 42.64V49h-2z'/%3E%3C/svg%3E");
}

/* Honey gradient: subtle, only for the one hero block. Flat is the default. */
.bg-honey-gradient {
  background-image: linear-gradient(150deg, var(--honey-300) 0%, var(--honey-500) 100%);
  color: var(--color-text-on-brand);
}

.bg-ink { background: var(--color-surface-inverse); color: var(--color-text-inverse); }

/* Evidence bar: fill level in a comb cell. */
.evidence-bar {
  --level: 0%;
  position: relative;
  height: 8px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--evidence-track);
  overflow: hidden;
}
.evidence-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level);
  background: var(--evidence-fill);
  border-radius: inherit;
  transition: width var(--dur-mid) var(--ease-out);
}
.evidence-bar[data-level="high"]::after   { background: var(--evidence-fill-high); }
.evidence-bar[data-level="sealed"]::after { background: var(--evidence-fill-high); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}