/* =====================================================================
   High Lights — Foundations
   Colors + Typography in one file
   Import anywhere: <link rel="stylesheet" href="/colors_and_type.css">
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FONTS
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Poppins-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Poppins-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Poppins-Black.ttf") format("truetype");
}

/* ---------------------------------------------------------------------
   2. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* ---- Brand palette (from the official brandbook) --------------- */
  --hl-ink:       #00061E;   /* near-black navy. primary dark */
  --hl-blue:      #0052FF;   /* electric brand blue */
  --hl-pink:      #FE347E;   /* hot brand pink */
  --hl-white:     #FFFFFF;

  /* ---- Derived neutrals (tints of --hl-ink) ---------------------- */
  --hl-ink-900:   #020820;   /* modal / deepest bg */
  --hl-ink-800:   #0B1130;   /* card bg on dark surfaces */
  --hl-ink-700:   #151B3B;   /* raised card bg */
  --hl-ink-600:   #242A4A;   /* hairline border on dark */
  --hl-ink-500:   #3A4065;   /* muted line */
  --hl-ink-400:   #6B7194;   /* muted text on dark */
  --hl-ink-300:   #A4A9C2;   /* tertiary text on dark */
  --hl-ink-200:   #D7DAE6;   /* dividers on light */
  --hl-ink-100:   #EEF0F6;   /* neutral surface light */
  --hl-ink-50:    #F7F8FB;   /* page surface light */

  /* ---- Blue + pink tints (for hovers, fills, focus rings) -------- */
  --hl-blue-700:  #0042CC;
  --hl-blue-600:  #0047E0;
  --hl-blue-300:  #5C85FF;
  --hl-blue-100:  #D6E1FF;

  --hl-pink-700:  #C81E5F;
  --hl-pink-600:  #E5266E;
  --hl-pink-300:  #FF7AAA;
  --hl-pink-100:  #FFD6E3;

  /* ---- Signature gradient (brandbook pairing) -------------------- */
  --hl-gradient:          linear-gradient(180deg, #0052FF 0%, #FE347E 100%);
  --hl-gradient-reverse:  linear-gradient(180deg, #FE347E 0%, #0052FF 100%);
  --hl-gradient-diag:     linear-gradient(135deg, #0052FF 0%, #FE347E 100%);
  --hl-gradient-radial:   radial-gradient(circle at 50% 0%, #FE347E 0%, #0052FF 55%, #00061E 100%);

  /* ---- Semantic foreground / background (dark-first) ------------- */
  --fg-1:  var(--hl-white);        /* primary text on dark */
  --fg-2:  var(--hl-ink-300);      /* secondary / meta */
  --fg-3:  var(--hl-ink-400);      /* tertiary, captions */
  --fg-accent-blue: var(--hl-blue);
  --fg-accent-pink: var(--hl-pink);

  --bg-page:    var(--hl-ink);     /* canonical dark page bg */
  --bg-surface: var(--hl-ink-800);
  --bg-raised:  var(--hl-ink-700);
  --bg-inverse: var(--hl-white);

  /* ---- Light-mode semantic aliases (opt-in via [data-theme=light]) */
  --fg-1-light:  var(--hl-ink);
  --fg-2-light:  #2A2E45;
  --fg-3-light:  #5A6079;
  --bg-page-light:    var(--hl-white);
  --bg-surface-light: var(--hl-ink-50);
  --bg-raised-light:  var(--hl-ink-100);

  /* ---- Stroke / border ------------------------------------------- */
  --stroke-1: color-mix(in oklab, var(--hl-white) 10%, transparent);
  --stroke-2: color-mix(in oklab, var(--hl-white) 6%, transparent);
  --stroke-strong: color-mix(in oklab, var(--hl-white) 20%, transparent);

  /* ---- Radii (brand leans rounded-pill for CTAs, 16–24 for cards)  */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

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

  /* ---- Shadows / glows ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 6, 30, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 6, 30, 0.32);
  --shadow-lg: 0 24px 64px rgba(0, 6, 30, 0.48);
  --glow-pink: 0 0 60px rgba(254, 52, 126, 0.45);
  --glow-blue: 0 0 60px rgba(0, 82, 255, 0.45);
  --glow-brand: 0 0 80px rgba(127, 67, 190, 0.55); /* pink+blue midmix */

  /* ---- Motion ---------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   420ms;

  /* ---- Type scale (Poppins-only, tight tracking on display) ------ */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  --fs-display-xl: clamp(56px, 7.5vw, 112px);
  --fs-display-lg: clamp(44px, 5.5vw, 80px);
  --fs-display-md: clamp(36px, 4vw, 56px);
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.55;

  --tr-tight:   -0.02em;
  --tr-normal:   0;
  --tr-wide:    0.08em;
  --tr-overline:0.18em;
}

/* Light theme overrides */
[data-theme="light"] {
  --fg-1: var(--fg-1-light);
  --fg-2: var(--fg-2-light);
  --fg-3: var(--fg-3-light);
  --bg-page: var(--bg-page-light);
  --bg-surface: var(--bg-surface-light);
  --bg-raised: var(--bg-raised-light);
  --stroke-1: rgba(0, 6, 30, 0.08);
  --stroke-2: rgba(0, 6, 30, 0.05);
  --stroke-strong: rgba(0, 6, 30, 0.18);
}

/* ---------------------------------------------------------------------
   3. BASE ELEMENTS
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — brand uses bold sans caps for display, sentence-case otherwise */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; }

.display-xl { font-size: var(--fs-display-xl); font-weight: 800; letter-spacing: var(--tr-tight); line-height: var(--lh-display); }
.display-lg { font-size: var(--fs-display-lg); font-weight: 800; letter-spacing: var(--tr-tight); line-height: var(--lh-display); }
.display-md { font-size: var(--fs-display-md); font-weight: 700; letter-spacing: var(--tr-tight); line-height: var(--lh-display); }

p { margin: 0 0 var(--sp-4) 0; color: var(--fg-1); text-wrap: pretty; }
.lead { font-size: var(--fs-body-lg); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
.overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
}

small, .small { font-size: var(--fs-body-sm); color: var(--fg-2); }

a {
  color: var(--hl-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              opacity  var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--hl-pink); }

/* Gradient text helper — use for signature moments, not everywhere */
.text-gradient {
  background: var(--hl-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Monospace only when needed (code, token values) — system stack */
code, kbd, pre, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  font-size: 0.92em;
}