/* =========================================================
   OptimoGov — Colors & Type
   The single source of truth for the brand's CSS variables.
   Import this file at the top of every HTML you build.
   ========================================================= */

/* -----------------------------------------------------------
   1. WEBFONTS
   Slate headings (Poppins SemiBold), structural sub-heads
   (Amiko), and warm humanist body copy (Work Sans).
   ----------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amiko";
  src: url("fonts/Amiko-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amiko";
  src: url("fonts/Amiko-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amiko";
  src: url("fonts/Amiko-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------
   2. TOKENS
   ----------------------------------------------------------- */
:root {
  /* === Type families ============================== */
  --font-display: "Poppins", "Helvetica Neue", system-ui, sans-serif; /* H1–H4 */
  --font-sub:     "Amiko", "Poppins", system-ui, sans-serif;         /* eyebrows, labels */
  --font-body:    "Work Sans", "Inter", system-ui, sans-serif;        /* paragraphs, UI */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* === Brand palette ============================== */
  --color-blue:      #1B3A5B; /* PRIMARY — deep blue: CTAs, key surfaces, brand mark */
  --color-green:     #3C7A3F; /* SECONDARY — green: accents, product/feature icons */
  --color-slate:     #222222; /* dark slate — primary text */
  --color-bg:        #F4F6F8; /* light neutral — page background */
  --color-cool-grey: #A6AEB8; /* mid neutral, secondary marks, disabled */
  --color-white:     #FFFFFF;

  /* === Extended neutral scale (cool slate, lands on text at 800) === */
  --neutral-50:  #FAFBFC;
  --neutral-100: #F4F6F8;  /* light neutral background */
  --neutral-200: #E5E9ED;
  --neutral-300: #CFD5DB;
  --neutral-400: #A6AEB8;  /* cool-grey */
  --neutral-500: #767E88;
  --neutral-600: #545A63;
  --neutral-700: #383C43;
  --neutral-800: #222222;  /* dark slate text */
  --neutral-900: #171717;
  --neutral-950: #0D0D0D;

  /* === Blue scale (primary — CTAs, headings, key accents) === */
  --blue-50:  #EDF2F7;
  --blue-100: #D2E0EC;
  --blue-200: #A6C1D8;
  --blue-300: #6F97BB;
  --blue-400: #3E6C97;
  --blue-500: #245278;
  --blue-600: #1B3A5B;  /* canonical primary blue */
  --blue-700: #163049;
  --blue-800: #102337;
  --blue-900: #0A1826;

  /* === Green scale (secondary accent) === */
  --green-50:  #EEF5EE;
  --green-100: #D2E7D3;
  --green-300: #7AB47C;
  --green-500: #3C7A3F;  /* primary green accent */
  --green-600: #2F6132;
  --green-700: #234A26;

  /* === Semantic state colors (calm, SaaS-appropriate) === */
  --color-success: #3C7A3F;
  --color-warning: #E0A700;
  --color-danger:  #D14545;
  --color-info:    #2E5E8C;

  /* === Foreground / Background semantics === */
  --bg-page:        var(--color-bg);      /* light neutral canvas */
  --bg-page-tint:   var(--neutral-200);   /* deeper neutral fill, opt-in */
  --bg-page-gradient: linear-gradient(180deg, #F8FAFB 0%, #F4F6F8 60%, #EEF1F4 100%); /* subtle neutral wash */
  --bg-surface:     var(--color-white);   /* cards, panels sit on the neutral canvas */
  --bg-surface-2:   var(--neutral-50);
  --bg-surface-3:   var(--neutral-100);
  --bg-inverse:     var(--color-blue);    /* dark UI sections use primary blue */

  --fg-1: var(--color-slate);      /* primary text */
  --fg-2: var(--neutral-600);      /* secondary text */
  --fg-3: var(--neutral-500);      /* tertiary, captions */
  --fg-4: var(--neutral-400);      /* placeholders, disabled */
  --fg-on-primary: var(--color-white);  /* text on deep-blue surfaces */
  --fg-on-inverse: var(--color-white);

  --border-1: var(--neutral-200);  /* hairline */
  --border-2: var(--neutral-300);  /* visible */
  --border-strong: var(--neutral-700);

  /* Focus ring — uses primary blue on a soft halo */
  --focus-ring: 0 0 0 3px rgba(27, 58, 91, 0.35);

  /* === Spacing scale (4px base) === */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === Radius — soft, SaaS+Apple === */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* === Shadows — layered, soft, never harsh (cool slate-blue tint) === */
  --shadow-xs: 0 1px 2px rgba(27, 58, 91, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 58, 91, 0.06), 0 1px 2px rgba(27, 58, 91, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 58, 91, 0.08), 0 2px 4px rgba(27, 58, 91, 0.04);
  --shadow-lg: 0 12px 28px rgba(27, 58, 91, 0.10), 0 4px 8px rgba(27, 58, 91, 0.04);
  --shadow-xl: 0 24px 56px rgba(27, 58, 91, 0.14), 0 8px 16px rgba(27, 58, 91, 0.06);
  --shadow-glow-blue: 0 8px 24px rgba(27, 58, 91, 0.30);

  /* === Motion === */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emph:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick:  120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* === Type scale ============================== */
  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   12px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

  /* === LEGACY ALIASES ============================
     Back-compat only. Old variable names map to the new palette so
     existing HTML keeps rendering during the rebrand. Prefer the new
     tokens above for anything new — these will be removed later.
     NOTE: names no longer match their values (e.g. --color-yellow is
     now deep blue). Migrate off these when convenient. */
  --color-charcoal:  var(--color-slate);  /* was #3C4053 → slate text */
  --color-yellow:    var(--color-blue);   /* was #FDD800 → primary blue */
  --color-off-white: var(--color-bg);     /* was #F1F2F3 → neutral bg */

  --yellow-50:  var(--blue-50);
  --yellow-100: var(--blue-100);
  --yellow-200: var(--blue-200);
  --yellow-300: var(--blue-300);
  --yellow-400: var(--blue-600);  /* old canonical → new canonical primary */
  --yellow-500: var(--blue-500);
  --yellow-600: var(--blue-700);
  --yellow-700: var(--blue-800);

  --fg-on-yellow:       var(--fg-on-primary);
  --shadow-glow-yellow: var(--shadow-glow-blue);
}

/* -----------------------------------------------------------
   3. SEMANTIC ELEMENT STYLES
   Apply these classes (or use as the bare element default).
   ----------------------------------------------------------- */
/* Display heading — default uses a subtle vertical gradient in the
   primary blue, lighter at the TOP fading to canonical deep blue at
   the bottom. Apple-restrained depth for the hero brand statement. */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 1.12;            /* room for descenders — critical with background-clip:text */
  letter-spacing: var(--tracking-tight);
  padding-bottom: 0.08em;       /* prevent background-clip:text from cropping descenders */
  color: var(--color-blue);     /* fallback */
  background: linear-gradient(180deg, #245278 0%, #1B3A5B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Green variant — for accent headings, or headings on deep-blue
   surfaces. Lighter green at top fading to canonical brand green at
   bottom. Use on request, not as default. */
.h-display--green,
h1.display.green,
.h1--green,
/* legacy aliases — old yellow accent classes now render as green */
.h-display--yellow,
h1.display.yellow,
.h1--yellow {
  background: linear-gradient(180deg, #7AB47C 0%, #3C7A3F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green-500);      /* fallback */
}
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4, h4 {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h5, h5 {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.label {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  color: var(--fg-1);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Selection — soft blue wash, deep-blue text */
::selection {
  background: var(--blue-100);
  color: var(--color-blue);
}