/* ============================================================
   Blotout Design System — colors & typography tokens
   Source: Figma "Blotout_ Brand Assets" (5-Colour-Palette, 6-Typography)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&family=Geist+Mono:wght@100;300;400;500;700&display=swap');

/* Space Grotesk — brand file (variable, weight axis) */
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand / Primary ---------- */
  --blotout-orange:       #EA580C;  /* Sunset Orange — primary brand */
  --blotout-orange-glow:  #FF5E20;  /* Orb / lighter on dark */
  --blotout-orange-50:    #FFF5EF;
  --blotout-orange-100:   #FFEDD5;
  --blotout-orange-300:   #FDBA74;
  --blotout-orange-500:   #F97316;
  --blotout-orange-600:   #EA580C;
  --blotout-orange-700:   #C2410C;

  --blotout-black:        #020617;  /* Absolute Black (slate-950) */
  --blotout-black-deep:   #130042;  /* Deep Indigo — product-logo backs */
  --blotout-black-plum:   #24003F;  /* SMBLead plum */
  --blotout-black-mulberry:#38003C; /* Evo AI background */

  /* ---------- Secondary (Amethyst / Indigo) ---------- */
  --amethyst-400:         #A855F7;
  --amethyst-500:         #9333EA;  /* Amethyst */
  --amethyst-600:         #7C3AED;
  --amethyst-800:         #4C1D95;

  --indigo-400:           #818CF8;
  --indigo-500:           #6366F1;
  --indigo-600:           #4F46E5;
  --indigo-700:           #4338CA;  /* Indigo */
  --indigo-800:           #3730A3;

  /* ---------- Product accents ---------- */
  --cyan-100:             #ECFEFF;  /* Consent gradient top */
  --cyan-400:             #22D3EE;  /* Consent gradient bottom-tint */
  --cyan-500:             #07B3D4;  /* Consent check gradient start */
  --cyan-600:             #3F41CA;  /* Consent check gradient end */
  --blue-500:             #3B82F6;  /* Data Nexus gradient start */
  --green-500:            #25AE6A;  /* Consent success */

  /* ---------- Neutrals (Slate + cool greys) ---------- */
  --white:                #FFFFFF;
  --snow:                 #FCFCFD;
  --mist:                 #F9FAFB;
  --slate-50:             #F8FAFC;
  --slate-100:            #F1F5F9;  /* Coral (neutral) */
  --slate-200:            #E4E7EC;
  --slate-300:            #D9D9D9;
  --slate-400:            #98A2B3;
  --slate-500:            #64748B;  /* Ash */
  --slate-600:            #475569;
  --slate-700:            #334155;  /* Coral dark */
  --slate-800:            #1E293B;
  --slate-900:            #0F172A;
  --slate-950:            #020617;

  --graphite:             #333333;
  --ink:                  #231F20;
  --grey-200:             #F2F4F7;
  --grey-300:             #E4E7EC;
  --grey-900:             #0A0D12;

  /* ---------- Semantic (light) ---------- */
  --bg:                   var(--white);
  --bg-subtle:            var(--mist);
  --bg-muted:             var(--slate-100);
  --bg-inverse:           var(--blotout-black);

  --fg-1:                 var(--blotout-black);
  --fg-2:                 var(--slate-700);
  --fg-3:                 var(--slate-500);
  --fg-4:                 var(--slate-400);
  --fg-inverse:           var(--white);
  --fg-inverse-muted:     rgba(255,255,255,0.8);

  --border:               var(--slate-200);
  --border-strong:        var(--slate-300);
  --border-subtle:        rgba(16,24,40,0.06);

  --link:                 var(--blotout-orange);
  --link-hover:           var(--blotout-orange-700);
  --accent:               var(--blotout-orange);
  --accent-contrast:      var(--white);

  /* ---------- Signature gradients ---------- */
  --grad-orb:             linear-gradient(135deg, #FF7A3A 0%, #FF5E20 45%, #EA580C 100%);
  --grad-consent:         linear-gradient(180deg, rgba(236,254,255,0.2) 0%, rgba(34,211,238,0.2) 100%), #FFFFFF;
  --grad-consent-check:   linear-gradient(180deg, #07B3D4 0%, #3F41CA 100%);
  --grad-data-nexus:      linear-gradient(180deg, #3B82F6 0%, #4338CA 100%);
  --grad-amethyst:        linear-gradient(180deg, #7C3AED 0%, #4C1D95 100%);
  --grad-ash:             linear-gradient(135deg, #F1F5F9 0%, #334155 100%);
  --grad-protection:      linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);

  /* ---------- Shadow & elevation ---------- */
  --shadow-xs:            0 1px 2px 0 rgba(16,24,40,0.06);
  --shadow-sm:            0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px 0 rgba(16,24,40,0.06);
  --shadow-md:            0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg:            0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-xl:            0 20px 24px -4px rgba(16,24,40,0.08), 0 8px 8px -4px rgba(16,24,40,0.03);
  --shadow-card:          0 1px 3px 0 rgba(10,13,18,0.10), inset 0 -0.5px 0.5px 0 rgba(10,13,18,0.10);
  --shadow-orb:           0 8px 40px -8px rgba(255,94,32,0.55);

  /* ---------- Radius ---------- */
  --radius-xs:            4px;
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-2xl:           20px;
  --radius-3xl:           30px;   /* product-tile signature */
  --radius-pill:          999px;

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

  /* ---------- Type families ---------- */
  --font-display:         "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:            "Inter", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --font-product:         "Inter", system-ui, sans-serif;  /* product wordmarks */
  --font-mono:            "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:                12px;
  --fs-sm:                14px;
  --fs-base:              16px;
  --fs-md:                18px;
  --fs-lg:                20px;
  --fs-xl:                24px;
  --fs-2xl:               30px;
  --fs-3xl:               36px;
  --fs-4xl:               48px;
  --fs-5xl:               60px;
  --fs-6xl:               72px;
  --fs-display:           100px;

  --lh-tight:             1.0;
  --lh-snug:              1.15;
  --lh-normal:            1.35;
  --lh-relaxed:           1.55;
  --lh-loose:             1.75;

  --tracking-tight:       -0.05em;   /* used on every display text in Figma */
  --tracking-display:     -0.04em;
  --tracking-normal:      0;
  --tracking-wide:        0.02em;

  /* ---------- Motion ---------- */
  --ease-out:             cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout:           cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:             120ms;
  --dur-base:             200ms;
  --dur-slow:             320ms;
}

/* ================================================================
   Semantic type classes — map tokens to h1/h2/p/code/etc
   ================================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, var(--fs-5xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  letter-spacing: var(--tracking-tight);
}
p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
small, .small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
pre code {
  display: block;
  background: var(--slate-950);
  color: var(--slate-100);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* dark-mode opt-in */
.on-dark, [data-theme="dark"] {
  --bg: var(--blotout-black);
  --bg-subtle: #0B1220;
  --bg-muted: #111827;
  --fg-1: var(--white);
  --fg-2: rgba(255,255,255,0.80);
  --fg-3: rgba(255,255,255,0.60);
  --fg-4: rgba(255,255,255,0.40);
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);
  color: var(--fg-1);
  background: var(--bg);
}