/* ============================================================
   WABBE — colors_and_type.css
   Canonical token sheet. Import this from any HTML page.

   Usage:  <link rel="stylesheet" href="../colors_and_type.css">
           html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-deep); }
   ============================================================ */

/* Self-hosted fonts — latin subset only */
/* Downloaded from Google Fonts, no external requests */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/JetBrains-Mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/JetBrains-Mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/JetBrains-Mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/Manrope-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Manrope-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Manrope-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Manrope-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Manrope-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Manrope-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/Sora-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Sora-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Sora-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Sora-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Sora-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Sora-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand color (the hero gradient) ----------
     Indigo · Cyan palette — adopted May 25, 2026.
     Token names kept stable for back-compat; the gradient is now cool-only,
     no magenta / fuchsia / pale pink. The old "magenta"/"violet" names refer
     to gradient stop positions, not to literal hues anymore. New aliases
     --grad-indigo / --grad-cyan / --brand-highlight are the source of truth. */
  --grad-indigo:         #6366F1;   /* indigo-500 — stop 1 */
  --grad-cyan:           #22D3EE;   /* cyan-400  — stop 3 */
  --brand-highlight:     #A5B4FC;   /* indigo-300 — top-of-orb highlight (replaces pink) */

  /* Legacy names — kept so old refs keep working */
  --grad-magenta:        #6366F1;   /* was fuchsia-400, now indigo-500 */
  --grad-violet:         #3B6BF6;   /* was violet-500,  now blue-500   — middle stop */
  --grad-blue:           #22D3EE;   /* was blue-500,    now cyan-400   */
  --grad-blue-deep:      #0F2440;   /* tail of orb (cool deep navy) */

  --brand-gradient:      linear-gradient(95deg, #6366F1 0%, #3B6BF6 50%, #22D3EE 100%);
  --brand-gradient-soft: linear-gradient(95deg, rgba(99,102,241,.18), rgba(59,107,246,.18) 50%, rgba(34,211,238,.18) 100%);
  --brand-radial:        radial-gradient(circle at 30% 25%, #6366F1 0%, #3B6BF6 35%, #22D3EE 70%, #0E1530 100%);

  /* ---------- Foundation neutrals (dark by default) ---------- */
  --bg-deep:    #06070F;   /* page canvas (near-black, cool) */
  --bg-night:   #0B0E1C;   /* sticky nav, footer */
  --bg-card:    #11142A;   /* elevated surface */
  --bg-card-2:  #161A33;   /* hovered surface */
  --bg-inset:   #080A16;   /* inset / code block */

  /* Brand navy — used on light surfaces (= the logotype color) */
  --navy-900: #0E1530;
  --navy-700: #1A2247;
  --navy-500: #2A3568;

  /* Foreground (on dark) */
  --fg-1: #FFFFFF;          /* primary text */
  --fg-2: #9AA3BC;          /* secondary, body copy */
  --fg-3: #5E6685;          /* tertiary, captions */
  --fg-4: #393F5C;          /* disabled, scaffolding */

  /* Foreground (on light) — invert */
  --fg-1-on-light: #0E1530;
  --fg-2-on-light: #4A5375;
  --fg-3-on-light: #7A8299;

  /* Hairlines & dividers */
  --line:        rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --line-on-light: rgba(14,21,48,0.08);

    /* ---------- Accent (solo colors plucked from the gradient) ----------
     Legacy names kept for back-compat. Literal hues changed with palette flip. */
  --accent-magenta: #6366F1;   /* was #E879F9 — now indigo-500 */
  --accent-violet:  #3B6BF6;   /* was #A855F7 — now blue-500   */
  --accent-blue:    #22D3EE;   /* was #3B6BF6 — now cyan-400   */

  /* ---------- Semantic ---------- */
  --success: #2DD4BF;   /* teal — sits inside the cool palette */
  --warning: #F5A524;
  --danger:  #F43F5E;
  --info:    var(--accent-blue);

  /* ---------- Light surface (alt theme) ---------- */
  --paper:        #F6F5F2;   /* warm off-white, NOT pure white */
  --paper-card:   #FFFFFF;
  --paper-inset:  #ECEAE5;

  /* ---------- Typography ---------- */
  --font-display: "Sora", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-eyebrow:   0.22em;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  /* ---------- Spacing scale (4px base) ---------- */
  --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:    6px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-full:  9999px;

  /* ---------- Elevation (light) + glow (dark) ---------- */
  --shadow-sm:   0 1px 2px rgba(14,21,48,.06);
  --shadow-md:   0 1px 2px rgba(14,21,48,.06), 0 8px 24px rgba(14,21,48,.06);
  --shadow-lg:   0 1px 2px rgba(14,21,48,.06), 0 16px 48px rgba(14,21,48,.10);

    --glow-violet: 0 0 80px 0 rgba(99,102,241,.40);
  --glow-blue:   0 0 80px 0 rgba(34,211,238,.30);
  --glow-orb:    0 0 120px 20px rgba(99,102,241,.32), 0 0 200px 60px rgba(34,211,238,.16);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast:      120ms;
  --t-base:      240ms;
  --t-slow:      640ms;
  --t-hero:      900ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply via class OR by selector — both supported.
   ============================================================ */

.eyebrow, [data-type="eyebrow"] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);
}

h1, .h1, [data-type="h1"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2, [data-type="h2"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3, [data-type="h3"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4, [data-type="h4"] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .body, [data-type="body"] {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}

.lead, [data-type="lead"] {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

small, .caption, [data-type="caption"] {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: var(--leading-snug);
  color: var(--fg-3);
}

.label, [data-type="label"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

code, kbd, .mono, [data-type="mono"] {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--leading-snug);
  color: var(--fg-2);
}

/* The signature two-line gradient headline */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ============================================================
   BASE
   ============================================================ */

.wabbe-dark {
  background: var(--bg-deep);
  color: var(--fg-1);
}
.wabbe-light {
  background: var(--paper);
  color: var(--fg-1-on-light);
}

::selection {
  background: rgba(99,102,241,.35);
  color: #fff;
}