/* ============================================================
   KWELITY — Design System
   ------------------------------------------------------------
   Brand: KWELITY (kwelity.io)
   Source of truth for color, type, spacing, radius, shadow.
   Reference: assets/reference-palette.png, reference-typeface.png
   ============================================================ */

/* -- Webfonts ------------------------------------------------ */
/* H1 / display: Astro Space (the licensed brand face — file in
   fonts/AstroSpace.otf). H2 / H3 / body / UI: Plus Jakarta Sans —
   the typeface the live kwelity.io site already uses across the
   whole surface. Modern, humanist, sets cleanly at every size,
   and the wider strokes complement Astro Space's geometric H1
   moment without competing with it. */
@font-face {
  font-family: "Astro Space";
  src: url("fonts/AstroSpace.ttf") format("truetype"),
       url("fonts/AstroSpace.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- BRAND COLORS (from brand sheet) ------------- */
  --k-purple-900:   #1F0044;  /* primary brand — deep purple */
  --k-navy-800:     #0B1A4D;  /* secondary — deep navy     */
  --k-purple-800:   var(--k-navy-800); /* alias, deprecated */
  --k-violet-400:   #766BA5;  /* muted violet              */
  --k-pink-400:     #FA65BF;  /* hot pink — accent         */
  --k-cyan-400:     #4DDDFF;  /* electric cyan — accent    */
  --k-amber-300:    #EFBA6C;  /* warm amber — accent       */

  /* Gradient stops pulled from the brand mark (sampled from
     the chevron icon: blue → pink → amber). */
  --k-grad-blue:    #6CC8F0;
  --k-grad-pink:    #F265B0;
  --k-grad-amber:   #F3B26A;

  /* Signature brand gradient (use sparingly: mark, accents,
     hero overlays — never as body bg). */
  --k-gradient: linear-gradient(140deg, var(--k-navy-800) 0%, var(--k-grad-blue) 22%, var(--k-grad-pink) 60%, var(--k-grad-amber) 100%);
  --k-gradient-soft: linear-gradient(140deg, rgba(11,26,77,.18), rgba(108,200,240,.18) 22%, rgba(242,101,176,.18) 60%, rgba(243,178,106,.18));

  /* ---------- NEUTRALS (dark-first system) ---------------- */
  --k-black:        #050308;
  --k-ink-1000:     #0A0612;   /* page bg, dark mode        */
  --k-ink-900:      #110A1F;   /* surface, dark             */
  --k-ink-800:      #1C1330;   /* card raised               */
  --k-ink-700:      #2A1E45;
  --k-ink-600:      #3D2F5E;
  --k-ink-500:      #5A4B7A;
  --k-ink-400:      #8A7DA8;
  --k-ink-300:      #B5AAC9;
  --k-ink-200:      #DAD4E6;
  --k-ink-100:      #EEEBF3;
  --k-ink-50:       #F7F5FA;
  --k-white:        #FFFFFF;

  /* ---------- SEMANTIC — FOREGROUND ----------------------- */
  --fg-1: var(--k-white);                /* primary text on dark   */
  --fg-2: rgba(255,255,255,.72);          /* secondary text on dark */
  --fg-3: rgba(255,255,255,.48);          /* tertiary, captions     */
  --fg-4: rgba(255,255,255,.24);          /* disabled, hairline     */
  --fg-on-light-1: var(--k-ink-1000);
  --fg-on-light-2: rgba(10,6,18,.66);
  --fg-on-light-3: rgba(10,6,18,.62);   /* was .44 — bumped for WCAG AA (4.5:1) on light grounds */

  /* ---------- SEMANTIC — BACKGROUNDS ---------------------- */
  --bg-canvas:   var(--k-black);          /* page bg (dark hero)    */
  --bg-surface:  var(--k-ink-900);        /* section                */
  --bg-raised:   var(--k-ink-800);        /* card                   */
  --bg-overlay:  rgba(10,6,18,.72);       /* modal scrim            */
  --bg-light:    var(--k-white);          /* light section          */
  --bg-light-2:  var(--k-ink-50);         /* alt light section      */

  /* ---------- SEMANTIC — STATES --------------------------- */
  --accent:        var(--k-cyan-400);     /* default accent / link  */
  --accent-warm:   var(--k-amber-300);
  --accent-hot:    var(--k-pink-400);
  --success:       #57E2A4;
  --warning:       var(--k-amber-300);
  --danger:        #FF6B7A;
  --info:          var(--k-cyan-400);

  /* ---------- BORDERS ------------------------------------- */
  --border-1: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.18);
  --border-strong: rgba(255,255,255,.32);
  --border-on-light: rgba(10,6,18,.10);

  /* ---------- TYPE — FAMILIES ----------------------------- */
  --font-display:  "Astro Space", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-headline: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body:     "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — SIZE SCALE (modular, 1.250) ---------- */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;
  --t-72: 4.5rem;
  --t-96: 6rem;

  /* ---------- TYPE — WEIGHTS & TRACKING ------------------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  --track-display: 0.16em;   /* HUGE, on display headings  */
  --track-eyebrow: 0.32em;   /* small all-caps eyebrows    */
  --track-button:  0.18em;   /* button labels              */
  --track-body:    0.005em;

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

  /* ---------- RADIUS -------------------------------------- */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-2xl:   40px;
  --r-pill:  999px;     /* capsules (CTA, eyebrow chip)     */

  /* ---------- SHADOWS ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 4px 16px rgba(0,0,0,.32);
  --shadow-3: 0 16px 40px rgba(0,0,0,.42);
  --shadow-glow-pink: 0 0 0 1px rgba(250,101,191,.30), 0 12px 48px rgba(250,101,191,.28);
  --shadow-glow-cyan: 0 0 0 1px rgba(77,221,255,.30), 0 12px 48px rgba(77,221,255,.24);
  --inset-hairline: inset 0 0 0 1px rgba(255,255,255,.06);

  /* ---------- MOTION -------------------------------------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* default UI    */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* hover bump    */
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-marquee: 32s;   /* used on the SINCE 2011 ticker    */
}

/* ============================================================
   SEMANTIC TYPE — apply as utility classes or as base styles.
   H1 uses Astro Space (caps, wide tracking) for the brand
   moment. H2/H3, eyebrows and buttons use Plus Jakarta Sans in
   uppercase with moderate tracking. Body uses Plus Jakarta Sans
   in sentence case.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(var(--t-56), 6vw, var(--t-96));
  line-height: 1.05;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(var(--t-40), 4.2vw, var(--t-72));
  line-height: 1.08;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-headline);
  font-weight: var(--w-bold);
  font-size: clamp(var(--t-32), 3.2vw, var(--t-56));
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-headline);
  font-weight: var(--w-regular);
  font-size: var(--t-24);
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-2);
}

h4, .h4 {
  font-family: var(--font-headline);
  font-weight: var(--w-semi);
  font-size: var(--t-20);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-headline);
  font-weight: var(--w-semi);
  font-size: var(--t-12);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-20);
  line-height: 1.55;
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--t-12);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--k-ink-800);
  border: 1px solid var(--border-1);
  padding: 0.12em 0.42em;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

/* Helpers --------------------------------------------------- */
.text-gradient {
  background: var(--k-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.surface-dark   { background: var(--bg-canvas); color: var(--fg-1); }
.surface-light  { background: var(--bg-light);  color: var(--fg-on-light-1); }
.surface-raised { background: var(--bg-raised); color: var(--fg-1); border: 1px solid var(--border-1); }