/* ==========================================================================
   GLOBAL.CSS — Sunline design tokens
   --------------------------------------------------------------------------
   This is the ONLY file that should be touched to change fonts or colors
   site-wide. Every other stylesheet (components.css, header/footer styles,
   page-specific styles) reads its values from the custom properties defined
   here — never hardcodes a color or font. To rebrand or swap typefaces,
   edit the tokens below and the whole site updates.
   ========================================================================== */

/* Roboto and Roboto Condensed ship as variable fonts (weight axis), so one
   file per style covers the full 400–700 range this site uses — replaces
   what used to be 8 separate static Barlow/Barlow Condensed files. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/roboto-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/roboto-italic-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/roboto-condensed-variable.woff2") format("woff2");
}

:root {
  /* ---- Brand colors ---------------------------------------------------- */
  --color-navy:          #032667;   /* primary surface: header, hero, CTA bands */
  --color-navy-dark:     #021a4a;   /* footer, deepest surface */
  --color-navy-soft:     #0c3a8c;   /* hover/active states on navy */
  --color-gold:          #ffcc02;   /* accent: eyebrows, rules, highlights */
  --color-gold-dark:     #d9ad00;   /* accent hover/active */

  /* ---- Neutrals ---------------------------------------------------------
     Every neutral carries a faint navy bias rather than pure grey, so the
     palette reads as chosen rather than default. */
  --color-bg:            #f4f5f6;   /* page background (light sections) */
  --color-surface:       #ffffff;   /* card / panel background */
  --color-surface-alt:   #eef1f4;   /* subtle alt panel, table stripes */
  --color-border:        #dde2e8;   /* hairline borders on light surfaces */
  --color-border-navy:   rgba(255, 255, 255, 0.16); /* hairline borders on navy */

  --color-ink:           #333333;   /* body text on light surfaces */
  --color-ink-soft:      #4c5670;   /* secondary text on light surfaces */
  --color-ink-faint:     #8791a8;   /* tertiary / meta text on light surfaces */

  /* ---- Market data (CN convention: red = up, green = down) -------------- */
  --color-stock-up:      #c0392b;
  --color-stock-down:    #1e8449;

  --color-on-navy:            #ffffff;              /* body text on navy */
  --color-on-navy-soft:       rgba(255, 255, 255, 0.78);
  --color-on-navy-faint:      rgba(255, 255, 255, 0.55);

  /* ---- Semantic aliases (what components should reference) ------------- */
  --color-accent:        var(--color-gold);
  --color-accent-hover:  var(--color-gold-dark);
  --color-link:          var(--color-navy);
  --color-focus-ring:    var(--color-gold);

  /* ---- Typography -------------------------------------------------------
     Two families: a condensed display face for headings/labels (uppercase,
     tight tracking) and a regular face for body copy. Change either family
     name here to re-typeset the entire site. */
  --font-heading: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Type scale — fluid via clamp() so headings stay proportionate from
     mobile to desktop without separate breakpoint overrides. */
  --fs-display:  clamp(2.5rem, 5vw, 3.35rem);   /* hero H1 */
  --fs-h1:       clamp(2.1rem, 3.6vw, 3rem);
  --fs-h2:       clamp(1.6rem, 2.6vw, 2.15rem);
  --fs-h3:       clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-h4:       1.15rem;
  --fs-body-lg:  1.275rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.9rem;
  --fs-eyebrow:  0.8125rem;
  --fs-micro:    0.75rem;

  --lh-tight:  1.12;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --ls-tight:  0.005em;
  --ls-wide:   0.06em;
  --ls-wider:  0.14em;

  /* ---- Spacing scale ----------------------------------------------------*/
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 112px;

  /* ---- Layout ------------------------------------------------------------*/
  --container-max: 1360px;
  --container-pad: 32px;
  --header-height: 84px;

  /* ---- Shape / elevation -------------------------------------------------
     Sharp corners throughout — a deliberate brand choice, not a default. */
  --radius: 0px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(3, 38, 103, 0.06), 0 8px 24px rgba(3, 38, 103, 0.06);
  --shadow-header: 0 4px 16px rgba(3, 38, 103, 0.12);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration: 0ms; }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--color-link);
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (max-width: 640px) {
  :root { --container-pad: 20px; }
}