/* ============================================================
   FW GLOBAL — Colors & Type
   Foundational tokens. Import this once at the top of any page.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Americane";
  src: url("fonts/Americane-Light.woff2") format("woff2"),
       url("fonts/Americane-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Americane";
  src: url("fonts/Americane-LightItalic.woff2") format("woff2"),
       url("fonts/Americane-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Americane";
  src: url("fonts/Americane-Regular.woff2") format("woff2"),
       url("fonts/Americane-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Americane";
  src: url("fonts/Americane-Italic.woff2") format("woff2"),
       url("fonts/Americane-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Americane";
  src: url("fonts/Americane-Medium.woff2") format("woff2"),
       url("fonts/Americane-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Americane";
  src: url("fonts/Americane-MediumItalic.woff2") format("woff2"),
       url("fonts/Americane-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Body / utility face — system font stack (no third-party loads).
   Americane is a CONDENSED DISPLAY face; it's not great as small running text.
   For body / UI we use a native system stack (Inter-equivalent) for privacy
   compliance: zero third-party network requests, zero cookies, zero IP leak. */

:root {
  /* ============ Brand Colors ============ */
  --fw-navy:        #0E235E;   /* Deep Navy — primary mark, headlines */
  --fw-navy-700:    #1A3273;   /* lifted navy for hover */
  --fw-navy-900:    #081744;   /* pressed / deep bg */
  --fw-teal:        #00A89C;   /* logo accent — actual extracted hue */
  --fw-teal-600:    #009384;   /* hover */
  --fw-teal-300:    #66CFC5;   /* tints */
  --fw-emerald:     #009966;   /* alternate accent (per brand notes) */
  --fw-gold:        #D4A843;   /* premium / awards */
  --fw-gold-600:    #B88A2B;
  --fw-charcoal:    #2D3142;   /* body text */
  --fw-cloud:       #F0F2F5;   /* surfaces */

  /* ============ Neutrals ============ */
  --fw-white:       #FFFFFF;
  --fw-paper:       #FAFBFC;
  --fw-gray-50:     #F5F6F8;
  --fw-gray-100:    #ECEEF2;
  --fw-gray-200:    #DCE0E7;
  --fw-gray-300:    #BDC4D0;
  --fw-gray-400:    #8E97A8;
  --fw-gray-500:    #5F6878;
  --fw-gray-600:    #434B5C;
  --fw-gray-700:    --fw-charcoal;
  --fw-black:       #0A0F1F;

  /* ============ Semantic ============ */
  --fg-1:           var(--fw-charcoal);
  --fg-2:           var(--fw-gray-500);
  --fg-3:           var(--fw-gray-400);
  --fg-on-navy:     #FFFFFF;
  --fg-on-teal:     #FFFFFF;
  --fg-on-gold:     var(--fw-navy);

  --bg-1:           var(--fw-white);
  --bg-2:           var(--fw-cloud);
  --bg-3:           var(--fw-gray-100);
  --bg-inverse:     var(--fw-navy);
  --bg-inverse-2:   var(--fw-navy-900);

  --border-1:       var(--fw-gray-200);
  --border-2:       var(--fw-gray-300);
  --border-strong:  var(--fw-charcoal);

  --accent:         var(--fw-teal);
  --accent-fg:      #FFFFFF;
  --primary:        var(--fw-navy);
  --primary-fg:     #FFFFFF;

  --success:        #1F9D6B;
  --warning:        #D4A843;
  --danger:         #C8472B;
  --info:           var(--fw-teal);

  /* ============ Type Families ============ */
  --font-display:   "Americane", "Oswald", "Impact", system-ui, sans-serif; /* condensed display */
  --font-body:      "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ Type Scale ============ */
  --t-display-1:    clamp(56px, 9vw, 128px);   /* hero, full-bleed */
  --t-display-2:    clamp(44px, 6vw, 88px);
  --t-h1:           clamp(36px, 4.5vw, 64px);
  --t-h2:           clamp(28px, 3vw, 44px);
  --t-h3:           22px;
  --t-h4:           18px;
  --t-eyebrow:      13px;
  --t-body:         16px;
  --t-body-lg:      18px;
  --t-small:        14px;
  --t-caption:      12px;

  /* ============ Spacing ============ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ============ Radii ============ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ============ Shadows ============ */
  --shadow-1: 0 1px 2px rgba(14, 35, 94, 0.06), 0 1px 1px rgba(14, 35, 94, 0.04);
  --shadow-2: 0 4px 12px rgba(14, 35, 94, 0.08), 0 2px 4px rgba(14, 35, 94, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 35, 94, 0.12), 0 4px 8px rgba(14, 35, 94, 0.06);
  --shadow-4: 0 24px 64px rgba(14, 35, 94, 0.18), 0 8px 16px rgba(14, 35, 94, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ============ Motion ============ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
}

/* ============ Base Element Styles ============ */
html, body { background: var(--bg-1); color: var(--fg-1); }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display, .display-2, .eyebrow {
  font-family: var(--font-display);
  color: var(--fw-navy);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 0.95;
  font-weight: 500;
  margin: 0;
}

.display    { font-size: var(--t-display-1); line-height: 0.9; letter-spacing: -0.01em; }
.display-2  { font-size: var(--t-display-2); line-height: 0.92; }
h1, .h1     { font-size: var(--t-h1); }
h2, .h2     { font-size: var(--t-h2); }
h3, .h3     { font-size: var(--t-h3); letter-spacing: 0; }
h4, .h4     { font-size: var(--t-h4); letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--fw-teal);
}

p     { margin: 0 0 var(--s-4); color: var(--fg-1); text-wrap: pretty; }
.lead { font-size: var(--t-body-lg); color: var(--fg-2); line-height: 1.55; }
small, .small { font-size: var(--t-small); color: var(--fg-2); }
.caption      { font-size: var(--t-caption); color: var(--fg-3); letter-spacing: 0.04em; }

a { color: var(--fw-teal-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--fw-navy); }

code, pre, kbd { font-family: var(--font-mono); }
code { background: var(--bg-3); padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.9em; }

::selection { background: var(--fw-teal); color: var(--fw-white); }