/* =====================================================================
   Haggai International — Colors & Type Tokens
   Source: HI Logo Quick Reference Guide
   ===================================================================== */

/* ----- Font faces ---------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Roboto_Condensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Roboto_Condensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- Tokens -------------------------------------------------------- */
:root {
  /* ---- Brand palette (from HI Logo Quick Reference Guide) -------- */
  --hi-dark-blue:   #203B63;
  --hi-medium-blue: #3B82BD;
  --hi-light-blue:  #D9F1FD;
  --hi-gold:        #FFC95C;
  --hi-taupe:       #6F6052;
  --hi-black:       #000000;
  --hi-white:       #FFFFFF;

  /* ---- Extended neutrals — SALESFORCE-SCOPED (2026.06 review) -----
     Stone/paper neutrals serve the Salesforce design language (record
     pages, unadorned pills, dense UI). Other kits and the web layer
     stick to the 7 brand colors plus white / light-blue fills. */
  --hi-paper:       #FAFAF7;   /* off-white, warmer than pure white */
  --hi-cream:       #F5EFE6;   /* gold-tinted neutral */
  --hi-stone-100:   #EFECE7;
  --hi-stone-200:   #D9D3CA;
  --hi-stone-300:   #B8AFA3;
  --hi-stone-500:   #8A7E70;
  --hi-stone-700:   #574A3E;

  /* ---- Semantic status colors (kept per 2026.06 review) -----------
     The official 7-color palette has no success/warning/error/info
     roles, but notification emails need them (approved = green,
     escalation = red, etc.). These are muted, earthy hues tuned to sit
     beside the brand blues/taupe rather than scream like generic web
     alert colors. Error reuses the red the FormAssembly kit already
     proposed (#B5403C). Info maps to the brand medium-blue family.
     Each role has a strong FG (for text/icons/bars), a soft BG tint
     (for panels), and a border. See ui_kits/salesforce-email/. */
  --status-success:        #2E7D55;
  --status-success-bg:     #E6F1EB;
  --status-success-border: #BFD9CC;
  --status-warning:        #B57A1C;
  --status-warning-strong: #8A6410;   /* small-text variant — AA on tint & white */
  --status-warning-bg:     #FBF0DA;
  --status-warning-border: #ECD9AE;
  --status-error:          #B5403C;   /* matches FA kit's proposed error */
  --status-error-bg:       #F8E9E8;
  --status-error-border:   #E8C5C3;
  --status-info:           #2F6CA3;   /* deeper medium-blue for text contrast */
  --status-info-bg:        #E3F1FB;
  --status-info-border:    #AFD2EC;

  /* ---- Tints / shades of brand blues (derived) ------------------- */
  --hi-dark-blue-90:  #354D75;
  --hi-dark-blue-80:  #4A5F88;
  --hi-medium-blue-90:#5295CB;
  --hi-medium-blue-tint:#8FB6D9;
  --hi-light-blue-50: #ECF7FE;

  /* ---- Semantic foreground / background -------------------------
     Per official usage rules:
       body text  = black        (--fg-body)
       headings   = dark blue     (--fg-heading)
       subtext    = taupe         (--fg-muted) */
  --bg:            var(--hi-paper);
  --bg-elevated:   var(--hi-white);
  --bg-subtle:     var(--hi-stone-100);
  --bg-brand:      var(--hi-dark-blue);
  --bg-brand-soft: var(--hi-light-blue);
  --bg-accent:     var(--hi-gold);

  --fg:            var(--hi-black);       /* body text */
  --fg-body:       var(--hi-black);       /* body text (alias) */
  --fg-heading:    var(--hi-dark-blue);   /* headings, headers, footers */
  --fg-muted:      var(--hi-taupe);       /* subtext, muted elements */
  --fg-subtle:     var(--hi-stone-500);
  --fg-on-brand:   var(--hi-white);
  --fg-on-gold:    var(--hi-taupe);       /* per guide: taupe on gold */
  --fg-on-light-blue: var(--hi-dark-blue);

  --accent:        var(--hi-gold);        /* icons, CTAs, highlights */

  --border:        var(--hi-stone-200);
  --border-strong: var(--hi-stone-300);
  --border-brand:  var(--hi-dark-blue);

  --link:          var(--hi-medium-blue);
  --link-hover:    var(--hi-dark-blue);

  /* ---- Type families ------------------------------------------- */
  --font-display:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-condensed:"Roboto Condensed", "Roboto", Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (rems @ 16px root) --------------------------- */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   2rem;      /* 32 */
  --fs-3xl:   2.5rem;    /* 40 */
  --fs-4xl:   3.25rem;   /* 52 */
  --fs-5xl:   4.5rem;    /* 72 */

  /* ---- Fluid type scale (v2026.06) ------------------------------
     For web pages & print collateral ONLY. Salesforce and email
     surfaces keep the fixed --fs-* scale above. */
  --fs-fluid-display: clamp(2.5rem, 6vw, 5rem);     /* @kind font */
  --fs-fluid-h1:      clamp(2rem, 4vw, 3.25rem);     /* @kind font */
  --fs-fluid-h2:      clamp(1.5rem, 3vw, 2.25rem);   /* @kind font */
  --fs-fluid-h3:      clamp(1.2rem, 2vw, 1.6rem);    /* @kind font */
  --fs-fluid-h4:      clamp(1rem, 1.5vw, 1.25rem);   /* @kind font */

  --lh-tight: 1.1;   /* @kind font */
  --lh-snug:  1.25;  /* @kind font */
  --lh-base:  1.5;   /* @kind font */
  --lh-loose: 1.7;   /* @kind font */

  --tracking-tight: 0;        /* retired (v2026.06) — headlines are never tracked */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps-lg:  0.14em;   /* ALL-CAPS only — nav, eyebrows, section labels */
  --tracking-caps-btn: 0.12em;   /* ALL-CAPS only — CTA buttons */
  --tracking-wider: var(--tracking-caps-btn);   /* back-compat alias */

  /* ---- Spacing scale (4px base) -------------------------------- */
  --sp-0: 0;   /* @kind spacing */
  --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 ---------------------------------------------------
     Haggai's print language is squared (rectangular gold accent bars,
     thin rules). Keep just a touch of softening so screen UI isn't
     stark — not the rounded look of generic web kits. */
  --r-none: 0;   /* @kind radius */
  --r-sm:   2px;
  --r-md:   4px;   /* buttons / inputs — v2026.06 component spec */
  --r-lg:   4px;   /* cards / surfaces — v2026.06 component spec */
  --r-xl:   8px;
  --r-pill: 999px;   /* reserve for true pills/avatars only */

  /* ---- Shadows (subtle, print-friendly brand) ------------------ */
  --shadow-1: 0 1px 2px rgba(32, 59, 99, 0.06), 0 1px 1px rgba(32, 59, 99, 0.04);
  --shadow-2: 0 4px 12px rgba(32, 59, 99, 0.08), 0 1px 2px rgba(32, 59, 99, 0.05);
  --shadow-3: 0 12px 32px rgba(32, 59, 99, 0.12), 0 2px 6px rgba(32, 59, 99, 0.06);

  /* ---- Motion -------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
}

/* ----- Base element styles ------------------------------------------ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--fg-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-weight: 700;
}

h1, .h1 { font-size: var(--fs-4xl); font-weight: 700; }
h2, .h2 { font-size: var(--fs-3xl); font-weight: 700; }
h3, .h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4, .h4 { font-size: var(--fs-xl);  font-weight: 600; }
h5, .h5 { font-size: var(--fs-lg);  font-weight: 600; }
h6, .h6 { font-size: var(--fs-md);  font-weight: 600; }

p {
  margin: 0 0 var(--sp-4) 0;
  line-height: var(--lh-base);
  color: var(--fg);
}
p.lead { font-size: var(--fs-md); color: var(--fg); line-height: var(--lh-loose); }
p.muted { color: var(--fg-muted); }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--hi-taupe);   /* v2026.06: taupe on white; use gold on dark/taupe surfaces */
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }