/* ============================================================================
   KELLY SETT — BRAND TOKENS
   Source of truth: set.kellyservices.us, extracted live 2026-07-25 from the
   official stylesheets (15 CSS files, 407KB) + the official logo SVG.
   Every core value below is MEASURED from production CSS, not chosen.

   USAGE: @import this file, or paste into <style>. Reference everything via
   var(--token). NEVER inline a hex or a font-family string.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&family=Oswald:wght@200..700&display=swap');

:root {
  /* ---- TYPE (measured: Kumbh Sans 53 declarations, Oswald 12, Roboto 2) ---- */
  --font-sans:    'Kumbh Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Oswald', 'Kumbh Sans', system-ui, sans-serif;   /* condensed, uppercase eyebrows + stat numerals */
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Kumbh Sans is a TRUE VARIABLE font (100–900) — real weights, no faux-bold ever. */
  --w-thin: 200;  --w-normal: 400;  --w-medium: 500;  --w-semi: 600;  --w-bold: 700;

  /* ---- CORE PALETTE — measured from production CSS (usage count in comments) ---- */
  --ink:            #3D3936;   /* 97× — charcoal. Primary text + dark ground. THE Kelly neutral. */
  --paper:          #EFEDEA;   /* 45× — warm off-white. The light ground; never pure #fff for large fields. */
  --sett-blue:      #006EB2;   /* 27× — SETT interactive blue. Links, active states. */
  --sett-blue-lift: #0072DA;   /* 17× — brighter blue, hover/emphasis. */
  --warm-gray:      #D9D4CE;   /* 21× — hairlines, dividers, disabled. */
  --warm-gray-soft: #D7D2CB;   /*  5× — softer rule. */
  --paper-lift:     #F7F6F5;   /*  5× — raised card on paper. */
  --kelly-green:    #00B142;   /*  4× — parent-brand green. CTA + "live/active" state. */
  --coral:          #EF6B51;   /*  4× — the rare accent. Alerts, single highlights. */
  --sky-tint:       #9DCBEF;   /*  5× — blue tint for washes. */
  --leaf-tint:      #D1E2AA;   /*  3× — green tint for washes. */
  --white:          #FFFFFF;
  --body-gray:      #333333;   /* 31× — long-form body copy on white. */

  /* ---- AI EXTENSION — the one addition, derived not invented ----
     Signal Cyan sits on SETT's own blue hue (~200°) pushed to maximum luminance
     and chroma. It is the AI-native register: energy, signal, live-system.
     Rule: it is the ONLY new hue. Never a purple gradient. Never two new colors. */
  --signal:         #00D1FF;
  --signal-deep:    #00A3C8;   /* pressed / small-text-safe on light */
  --signal-glow:    rgba(0, 209, 255, 0.35);
  --signal-wash:    rgba(0, 209, 255, 0.08);

  /* ---- STATE (accessible foregrounds — the raw brand hues fail contrast as text) ---- */
  --green-fg:   #0A7A34;   /* Kelly green darkened to pass 4.5:1 on light */
  --green-wash: rgba(0,177,66,.09);
  --green-edge: rgba(0,177,66,.30);
  --coral-fg:   #B3341F;   /* coral darkened to pass 4.5:1 on light */
  --coral-wash: rgba(239,107,81,.09);
  --coral-edge: rgba(239,107,81,.30);
  --code-dark-bg:   #3F3B37;   /* inline code inside .on-dark */
  --code-dark-edge: #57524D;

  /* ---- SEMANTIC (use these in components, not the raw palette) ---- */
  --bg:             var(--paper);
  --bg-elevated:    var(--white);
  --bg-dark:        var(--ink);
  --bg-dark-lift:   #47433F;
  --text:           var(--ink);
  --text-muted:     #6B6560;
  --text-on-dark:   #F2F0EE;
  --text-on-dark-muted: #A9A29C;
  --rule:           var(--warm-gray);
  --rule-dark:      rgba(255,255,255,.14);
  --link:           var(--sett-blue);
  --link-hover:     var(--sett-blue-lift);
  --cta:            var(--kelly-green);
  --focus:          var(--signal);

  /* ---- SCALE — fluid, clamp-based. No media queries needed for type. ---- */
  --step--1: clamp(.78rem, .74rem + .2vw, .875rem);
  --step-0:  clamp(.95rem, .91rem + .22vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
  --step-5:  clamp(3rem, 1.8rem + 5.6vw, 7rem);

  /* ---- SPACE / RADIUS / MOTION ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-full: 999px;

  --ease-out:  cubic-bezier(.22, 1, .36, 1);      /* the house ease — decisive, no bounce */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms; --t-base: 320ms; --t-slow: 620ms;

  --shadow-sm: 0 1px 2px rgba(61,57,54,.06), 0 2px 8px rgba(61,57,54,.05);
  --shadow-md: 0 4px 12px rgba(61,57,54,.08), 0 12px 32px rgba(61,57,54,.07);
  --shadow-lg: 0 12px 32px rgba(61,57,54,.10), 0 32px 64px rgba(61,57,54,.10);
}

/* ============================================================================
   TYPOGRAPHY LAW — non-negotiable, prevents the #1 recurring brand bug
   ============================================================================ */
* { font-synthesis: none; }          /* browser NEVER fakes a weight */

body {
  font-family: var(--font-sans);
  font-weight: var(--w-normal);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: hierarchy comes from SIZE. Kumbh Sans has real cuts, so weight is
   allowed — but capped at 600 for display sizes. Browsers default h1–h6 to
   bold(700); we override every one explicitly. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--step-4); letter-spacing: -.035em; }
h2 { font-size: var(--step-3); letter-spacing: -.028em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: var(--w-medium); }
h5, h6 { font-size: var(--step-0); font-weight: var(--w-medium); }

p { text-wrap: pretty; max-width: 68ch; }

/* Body emphasis: 600 + accent — NEVER 700/800 inline. */
strong, b { font-weight: var(--w-semi); color: var(--sett-blue); }

/* Oswald: condensed display. Uppercase eyebrows + big numerals ONLY. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.numeral {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

/* ============================================================================
   COMPONENTS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: var(--w-semi); font-size: var(--step-0);
  padding: .7em 1.5em; border-radius: var(--r-full); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--cta); color: var(--white); box-shadow: 0 4px 14px rgba(0,177,66,.28); }
.btn--primary:hover { box-shadow: 0 8px 24px rgba(0,177,66,.36); }
.btn--signal { background: var(--signal); color: var(--ink); box-shadow: 0 4px 14px var(--signal-glow); }
.btn--signal:hover { box-shadow: 0 8px 26px var(--signal-glow); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-lift); }

.card {
  background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--signal) 40%, var(--rule)); }

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--step--1); font-weight: var(--w-medium);
  padding: .3em .85em; border-radius: var(--r-full);
  background: var(--signal-wash); color: var(--signal-deep);
  border: 1px solid color-mix(in oklab, var(--signal) 30%, transparent);
}

/* Dark section inversion */
.on-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-on-dark); }
.on-dark .eyebrow { color: var(--signal); }
.on-dark a { color: var(--signal); }
.on-dark .card { background: var(--bg-dark-lift); border-color: var(--rule-dark); color: var(--text-on-dark); }

/* ============================================================================
   MOTION — GPU-only properties (transform/opacity). Scroll-driven where
   supported, zero JS. Every animation respects reduced-motion.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
  }
  @supports not (animation-timeline: view()) {
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
    .reveal.is-in { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }