/* ==========================================================================
   Latus — Colors & Type
   Single source of truth for visual foundations.
   Pair with: assets/, fonts/
   ========================================================================== */

/* ---------- Web fonts ---------------------------------------------------- */
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Core palette — used in 90% of surfaces */
  --latus-dark-blue:   #031F58;   /* primary brand color, all logo + heading */
  --latus-off-white:   #FAFAFA;   /* primary surface */
  --latus-paper:       #FBFBFB;   /* alt off-white from logo guidance */
  --latus-ink:         #031F58;   /* alias: text on light */

  /* Brand palette — used SPARINGLY for accents, CTAs, interaction */
  --latus-light-blue:  #E1F2FF;
  --latus-indigo:      #3B50CE;

  /* Gradient palette — backgrounds, washes, data viz */
  --latus-blue-01:     #0D51FF;
  --latus-blue-02:     #186EFF;
  --latus-blue-03:     #0B86FF;
  --latus-blue-04:     #559DFF;
  --latus-blue-05:     #75C4FC;
  --latus-blue-06:     #7ED7FD;
  --latus-blue-07:     #9CCAFA;
  --latus-blue-08:     #BAEBFA;
  --latus-blue-09:     #EDFAFE;
  --latus-blue-10:     #E1F2FF;

  /* Neutral scale derived from off-white + dark-blue ink */
  --latus-n-00: #FFFFFF;
  --latus-n-05: #FAFAFA;
  --latus-n-10: #F2F4F8;
  --latus-n-20: #E5E8EE;
  --latus-n-30: #C9CFDB;
  --latus-n-40: #98A1B5;
  --latus-n-50: #6A7388;
  --latus-n-60: #3F4961;
  --latus-n-70: #1F2A48;
  --latus-n-80: #0B1738;
  --latus-n-90: #031F58;   /* = dark blue */

  /* Semantic foreground / background */
  --fg-1: var(--latus-dark-blue);   /* primary text */
  --fg-2: var(--latus-n-60);        /* secondary text */
  --fg-3: var(--latus-n-50);        /* tertiary / metadata */
  --fg-inverse: var(--latus-off-white);

  --bg-1: var(--latus-off-white);   /* page */
  --bg-2: var(--latus-n-10);        /* card / raised */
  --bg-3: var(--latus-light-blue);  /* tinted block */
  --bg-inverse: var(--latus-dark-blue);

  --line-1: var(--latus-n-20);      /* hairline divider */
  --line-2: var(--latus-n-30);      /* pronounced divider */
  --line-strong: var(--latus-dark-blue); /* brand-blue stroke (Foundation diagram) */

  --accent: var(--latus-indigo);
  --accent-fg: var(--latus-off-white);

  /* Status — tuned to live inside the cool blue palette */
  --success: #2E7D5B;
  --warning: #B26A00;
  --error:   #C0392B;
  --info:    var(--latus-blue-02);

  /* Type system */
  --font-sans: "Aktiv Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (desktop). Mobile clamps via fluid sizes below. */
  --text-display:   clamp(48px, 6vw, 96px);  /* hero / Foundation-style display */
  --text-h1:        clamp(36px, 4vw, 64px);
  --text-h2:        clamp(28px, 3vw, 44px);
  --text-h3:        24px;
  --text-h4:        20px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-body-sm:   14px;
  --text-caption:   12px;
  --text-eyebrow:   12px;

  --leading-tight:  1.05;
  --leading-snug:   1.15;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  --tracking-tight: -0.02em;   /* display + h1, mirrors logo */
  --tracking-normal: 0;
  --tracking-wide:  0.08em;    /* eyebrow, allcaps labels */

  /* Spacing — 4px base, geometric */
  --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 — restrained, mostly square; pills used on chips/CTAs */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* Shadows — minimal; a single soft elevation + a focus ring */
  --shadow-1: 0 1px 2px rgba(3, 31, 88, 0.06);
  --shadow-2: 0 8px 24px rgba(3, 31, 88, 0.08);
  --shadow-3: 0 24px 60px rgba(3, 31, 88, 0.12);
  --ring-focus: 0 0 0 3px rgba(59, 80, 206, 0.35);

  /* Borders — hairlines are the dominant divider */
  --border-hair: 1px solid var(--line-1);
  --border-rule: 1px solid var(--line-strong);   /* brand-blue, used in Foundation diagram */

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Layout */
  --content-max: 1200px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ---------- Dark surface inversion -------------------------------------- */
.latus-on-dark,
[data-theme="dark"] {
  --fg-1: var(--latus-off-white);
  --fg-2: rgba(250,250,250,0.72);
  --fg-3: rgba(250,250,250,0.5);
  --bg-1: var(--latus-dark-blue);
  --bg-2: #0A2A6B;
  --bg-3: #102F73;
  --line-1: rgba(250,250,250,0.16);
  --line-2: rgba(250,250,250,0.28);
  --line-strong: var(--latus-light-blue);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
}

/* ---------- Semantic element styles ------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-1);
}

.display, h1.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-lg, .lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  font-weight: 300;
}

small, .caption {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

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

a {
  color: var(--latus-indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--latus-dark-blue); }

hr { border: 0; border-top: var(--border-hair); margin: var(--s-6) 0; }

::selection { background: var(--latus-light-blue); color: var(--latus-dark-blue); }