/* ============================================================
   Strawboss Design System — colors_and_type.css
   AI-native EHS · "Shorten the distance between the field
   and the insight."

   Import this once at the root of any artifact.
   Use tokens, never raw hex.
   ============================================================ */

/* ============================================================
   Brand fonts — Inter + Inter Display (Inter v4)
   ------------------------------------------------------------
   Local-first: drop the official files into /fonts/ for pixel-
   perfect parity with the brand guide (see fonts/README.md).
   If absent, the browser falls back to rsms.me — the official
   Inter distribution — automatically.

   Inter is OFL-licensed. Free for commercial use.
   Source of truth: https://rsms.me/inter/
   ============================================================ */

/* Inter — UI variant. Full weight range (100–900) via the
   variable axis. font-optical-sizing: auto (declared below in
   .sb-typography) lets the browser pick the right opsz per
   font-size. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter Variable'),
       local('Inter'),
       url('fonts/InterVariable.woff2') format('woff2-variations'),
       url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter Variable Italic'),
       local('Inter Italic'),
       url('fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.1') format('woff2-variations');
}

/* Inter Display — headline variant. Same variable font, but
   the optical-size axis is pinned to 32 for the tighter,
   denser fitting Inter Display was designed for. Use on
   anything ≥ 28pt: logo wordmark, marketing hero, slide cover. */
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('InterDisplay'),
       local('Inter Display'),
       url('fonts/InterDisplay.woff2') format('woff2-variations'),
       url('https://rsms.me/inter/font-files/InterDisplay.woff2?v=4.1') format('woff2-variations');
}
@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local('InterDisplay Italic'),
       local('Inter Display Italic'),
       url('fonts/InterDisplay-Italic.woff2') format('woff2-variations'),
       url('https://rsms.me/inter/font-files/InterDisplay-Italic.woff2?v=4.1') format('woff2-variations');
}

:root {
  /* ============== BRAND PALETTE ============== */
  --c-amber:           #F59E0B;  /* Straw Amber  — primary brand */
  --c-navy:            #0F172A;  /* Deep Navy    — text, anchor, dark surfaces */
  --c-brown:           #92400E;  /* Earth Brown  — tagline, secondary text */
  --c-green:           #10B981;  /* Insight Green — AI-found moments (RESERVED) */
  --c-yellow:          #FCD34D;  /* Highlight Yellow — dark-mode accent */
  --c-paper:           #FAFAF7;  /* Paper        — warm off-white default bg */

  /* ============== GREYSCALE SUPPORT ============== */
  --c-charcoal:        #1F2937;  /* secondary text on Paper */
  --c-slate:           #475569;  /* captions, metadata */
  --c-slate-light:     #94A3B8;  /* tertiary text, helper */
  --c-mist:            #E2E8F0;  /* dividers, borders, table rules */
  --c-mist-strong:     #CBD5E1;  /* deeper Mist */
  --c-cloud:           #F1F5F9;  /* subtle background fills, input bg */
  --c-white:           #FFFFFF;  /* raised cards/modals only */

  /* ============== STATUS / SEMANTIC ============== */
  --c-warning:         #D97706;  /* darkened amber — non-blocking */
  --c-danger:          #C2410C;  /* terracotta — blocking, never bright red */
  --c-info:            #475569;  /* Slate — neutral info */
  --c-success:         var(--c-green); /* alias to Insight Green */

  /* ============== SEMANTIC TOKENS — BRAND ============== */
  --brand-primary:     var(--c-amber);
  --brand-on-primary:  var(--c-navy);
  --brand-dark:        var(--c-navy);
  --brand-accent:      var(--c-brown);

  /* ============== SEMANTIC TOKENS — SURFACE ============== */
  --surface-default:   var(--c-paper);
  --surface-raised:    var(--c-white);
  --surface-sunken:    var(--c-cloud);
  --surface-overlay:   rgba(15, 23, 42, 0.6);

  /* ============== SEMANTIC TOKENS — TEXT ============== */
  --text-primary:      var(--c-charcoal);
  --text-secondary:    var(--c-slate);
  --text-tertiary:     var(--c-slate-light);
  --text-on-dark:      var(--c-paper);
  --text-link:         var(--c-brown);

  /* ============== SEMANTIC TOKENS — BORDER ============== */
  --border-default:    var(--c-mist);
  --border-strong:     var(--c-mist-strong);
  --border-focus:      var(--c-amber);

  /* ============== TYPOGRAPHY ============== */
  --font-sans:    'Inter', 'GT America', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Inter Display', 'Inter', 'GT America', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — digital/product
     Values are font-size / line-height / weight tuples.
     Use the helper classes below or the individual vars. */
  --fs-display:    32px;  --lh-display:    1.2;  --fw-display:    700;
  --fs-h1:         24px;  --lh-h1:         1.3;  --fw-h1:         700;
  --fs-h2:         18px;  --lh-h2:         1.4;  --fw-h2:         600;
  --fs-h3:         16px;  --lh-h3:         1.4;  --fw-h3:         600;
  --fs-body-lg:    18px;  --lh-body-lg:    1.55; --fw-body:       400;
  --fs-body:       14px;  --lh-body:       1.5;  --fw-body-md:    500;
  --fs-small:      12px;  --lh-small:      1.4;
  --fs-eyebrow:    11px;  --lh-eyebrow:    1.0;  --fw-eyebrow:    600;

  /* Marketing / hero scale (sizes match brand foundation web/digital) */
  --fs-marketing-display: 72px;
  --fs-marketing-h1:      48px;
  --fs-marketing-h2:      32px;
  --fs-marketing-body:    18px;

  /* Slide scale (1920x1080, 16:9) */
  --fs-slide-cover:   80px;
  --fs-slide-section: 96px;
  --fs-slide-h1:      44px;
  --fs-slide-bignum:  240px;
  --fs-slide-body:    22px;

  /* ============== SPACING — 4px base ============== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============== RADII ============== */
  --radius-sm:    6px;   /* inputs, buttons */
  --radius-md:    12px;  /* cards, modals */
  --radius-app:   22%;   /* app icon / avatar — % of width */
  --radius-pill:  999px;

  /* ============== ELEVATION (warm — uses Deep Navy) ============== */
  --elev-1: 0 1px 2px   rgba(15, 23, 42, 0.06);
  --elev-2: 0 4px 12px  rgba(15, 23, 42, 0.08);
  --elev-3: 0 16px 48px rgba(15, 23, 42, 0.12);

  /* ============== MOTION ============== */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-default: 200ms;
}

/* ============== DARK MODE TOKENS ==============
   Office reviewers at night. Same amber + navy palette,
   no recoloring required. */
:root[data-theme="dark"], .strawboss-dark {
  --surface-default:   #020617;   /* deeper than Deep Navy */
  --surface-raised:    #0F172A;   /* Deep Navy */
  --surface-sunken:    #1E293B;
  --surface-overlay:   rgba(2, 6, 23, 0.7);
  --text-primary:      var(--c-paper);
  --text-secondary:    #94A3B8;
  --text-tertiary:     #64748B;
  --text-on-dark:      var(--c-paper);
  --text-link:         var(--c-yellow);
  --border-default:    #1E293B;
  --border-strong:     #334155;
}

/* ============================================================
   Semantic element styles. Opt in by adding `.sb-typography`
   to a root container, or use the individual classes directly.
   ============================================================ */

.sb-typography,
.sb-typography * {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-optical-sizing: auto;          /* honours Inter's opsz axis */
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter v4: single-storey a, alt 6/9, alt I */
}

.sb-typography {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.sb-display,
.sb-typography .sb-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  color: var(--c-navy);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 32; /* pin display optical size */
}

.sb-h1, .sb-typography h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  color: var(--c-navy);
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 32;
  margin: 0;
}

.sb-h2, .sb-typography h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--c-navy);
  margin: 0;
}

.sb-h3, .sb-typography h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  color: var(--c-navy);
  margin: 0;
}

.sb-body-lg, .sb-typography .body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-primary);
}

.sb-body, .sb-typography p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin: 0;
}

.sb-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
}

.sb-caption {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  font-weight: 500;
}

.sb-eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-eyebrow);
  color: var(--c-brown);
  text-transform: uppercase;
  letter-spacing: 0.18em; /* +200 tracking equivalent */
}

.sb-link {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-default);
}
.sb-link:hover { border-bottom-color: var(--text-link); }

/* Focus ring — non-negotiable */
.sb-focus-ring:focus-visible,
.sb-typography :focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 2px;
}

/* AI-found pip — Insight Green, 8px circle */
.sb-pip-ai {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  vertical-align: middle;
  margin-right: var(--space-2);
}