/* =====================================================================
   ADSIDE — Colors & Type
   Brand concept by anagram, 2026. AI ad-ops platform.
   Load this file, then use the CSS variables below.

   FONTS — substitution note:
   • Geist (body/UI)  → self-hosted from fonts/Geist-*VariableFont_wght.ttf.
   • Geist Mono  → Google Fonts CDN (real brand family).
   • Sharp Grotesk DB (display)  → the brand's licensed display face.
     Substituted here with **Hanken Grotesk** (Google Fonts) as the nearest
     free geometric-grotesque. Swap in the real Sharp Grotesk webfonts when
     the uploaded font files are available (see README "Fonts").
   • APK Protocol (deck footer labels) / Geist Pixel → substituted with
     Geist Mono.
   ===================================================================== */

/* Geist body/UI face — self-hosted from the uploaded variable fonts.
   Geist Mono (real brand family) + Hanken Grotesk (display substitute for
   the licensed Sharp Grotesk DB) stay on Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Sharp Grotesk DB — the brand's licensed display face (real files now bundled). */
@font-face {
  font-family: 'Sharp Grotesk DB';
  src: url('fonts/SharpGrotesk-Medium20.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sharp Grotesk DB';
  src: url('fonts/SharpGrotesk-SemiBold20.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
/* Sharp Grotesk DB 25 — wider cut, SemiBold. Used for the big hero/statement headlines. */
@font-face {
  font-family: 'Sharp Grotesk DB 25';
  src: url('fonts/SharpGrotesk-SemiBold25.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
/* Sharp Grotesk DB 15 — narrower cut, SemiBold. Used for the sticker/pill labels. */
@font-face {
  font-family: 'Sharp Grotesk DB 15';
  src: url('fonts/SharpGrotesk-SemiBold15.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette ------------------------------------------------ */
  --blue-1:      #0144F5;   /* PRIMARY. Electric blue. Backgrounds, CTAs, links */
  --blue-1-700:  #013BD1;   /* pressed / darker blue */
  --blue-2:      #A8E1F8;   /* SECONDARY. Pale sky blue. Tints, accents */
  --pink:        #FFD5F3;   /* SECONDARY. Soft pink. Type on bordeaux, accents */
  --bordeaux:    #390507;   /* SECONDARY. Deep oxblood. Section grounds */
  --bordeaux-2:  #411423;   /* warmer bordeaux used for auth panels */
  --pink-text:   #E352AB;   /* magenta — type/links on bordeaux panels */

  /* ---- Ink / neutrals ---------------------------------------------- */
  --ink:         #0C0C0C;   /* near-black, primary text */
  --ink-2:       #1D1E21;   /* secondary ink */
  --gray-600:    #65676B;   /* muted body / captions */
  --gray-500:    #858686;   /* placeholder, disabled label */
  --gray-300:    #DDDDDF;   /* borders, hairlines */
  --gray-200:    #E6E7EB;   /* card borders, dividers */
  --gray-100:    #F3F4F6;   /* chip / input fill */
  --gray-50:     #FAFAFA;   /* page tint */
  --white:       #FFFFFF;

  /* ---- Semantic ----------------------------------------------------- */
  --success:     #14B562;   /* positive deltas, checks */
  --danger:      #EA4242;   /* errors, negative */
  --link:        var(--blue-1);

  /* ---- Type families ------------------------------------------------ */
  --font-display: 'Sharp Grotesk DB', 'Hanken Grotesk', 'Geist', system-ui, sans-serif;
  --font-headline: 'Sharp Grotesk DB 25', 'Sharp Grotesk DB', 'Hanken Grotesk', 'Geist', system-ui, sans-serif;
  --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (px) ---------------------------------------------- */
  --t-display:   150px;  /* hero / type-specimen letters */
  --t-h0:        96px;   /* big marketing headline */
  --t-h1:        56px;   /* slide & section titles (Geist or display) */
  --t-h2:        40px;
  --t-h3:        24px;   /* card titles, lead body */
  --t-body:      16px;
  --t-sm:        14px;
  --t-label:     12px;   /* mono labels, eyebrows */

  /* ---- Radii -------------------------------------------------------- */
  --r-sm:   8px;     /* inputs, small chips */
  --r-md:   12px;    /* cards */
  --r-lg:   20px;    /* large cards / panels */
  --r-pill: 999px;   /* buttons, nav, tags */

  /* ---- Shadows / elevation ----------------------------------------- */
  --shadow-sm:  0px 1px 2px 0px rgba(14,13,43,0.04);
  --shadow-md:  0px 10px 20px 0px rgba(14,13,43,0.05), 0px 1px 2px 0px rgba(14,13,43,0.04);
  --shadow-lg:  0px 24px 48px -12px rgba(14,13,43,0.18);

  /* ---- Spacing (8pt base) ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* ---- Layout ------------------------------------------------------- */
  --page-margin: 72px;   /* deck & marketing gutter */
}

/* =====================================================================
   Semantic type roles — apply as classes or copy the declarations.
   Headlines use the display face; body & UI use Geist.
   ===================================================================== */
.ads-display {            /* hero / specimen */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.ads-h0 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h0); line-height: 1.02; letter-spacing: -0.02em; }
.ads-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.01em; }
.ads-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.1; }
.ads-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
.ads-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h3); line-height: 1.5; }
.ads-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: 1.5; }
.ads-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-sm); line-height: 1.5; }
.ads-label {              /* eyebrows, deck header/footer, kpi labels */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}