/* ============================================================
   Stur Africa — Base + Semantic Design Tokens
   Drop this file into any page, add <link rel="stylesheet">, go.
   ============================================================ */

/* ------- Brand webfonts (local) ------- */
/* Inter — variable, upright + italic. Covers weights 100–900 and all optical sizes.
   Still-needed UI font Geist is pulled from CDN; no brand asset was supplied. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Playfair Display — serif display, upright + italic. Regular/Bold/Black static. */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* Secondary UI font — still loaded via CDN since no local asset was provided */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

:root {
  /* ==================== COLOR — BASE ==================== */
  --ink: #000000;
  --paper: #ffffff;

  --stur-purple: #5433EB;
  --stur-purple-hover: #6444F6;
  --stur-purple-dark: #311664;

  /* Neutrals */
  --grey-900: #191919;
  --grey-near-black: #1a1a1a;  /* primary button hover */
  --grey-700: #2F2F2F;       /* inbound chat bubble */
  --grey-500: #6A7283;       /* footer column heads, muted text */
  --grey-300: #D5DBE1;       /* secondary button stroke */
  --grey-200: #E7E1E1;
  --grey-100: #F0F2F3;       /* neutral button fill */
  --grey-50:  #F7F8F9;

  /* Alpha blacks (used for eyebrow, body-60, dividers) */
  --ink-40: rgba(0,0,0,0.40);
  --ink-50: rgba(0,0,0,0.50);
  --ink-60: rgba(0,0,0,0.60);
  --ink-80: rgba(0,0,0,0.80);
  --ink-06: rgba(0,0,0,0.06);
  --ink-05: rgba(0,0,0,0.05);
  --ink-12: rgba(0,0,0,0.12);

  /* Pastels — gradient source palette */
  --pastel-lilac:    #E7E1FF;
  --pastel-blush:    #F1E1E1;
  --pastel-peach:    #FDE7DC;
  --pastel-mint:     #F0FFFF;
  --pastel-rose:     #FFD5E6;
  --pastel-sky:      #D5E8FF;
  --pastel-sky-2:    #C4DDFF;
  --pastel-orchid:   #E8D4F1;
  --pastel-lavender: #D6A7FF;
  --pastel-apricot:  #FAE0C5;
  --pastel-coral:    #FFCA8A;

  /* Stur AI rainbow (gradient-ready) */
  --ai-amber:   #FAAD4F;
  --ai-magenta: #DD2A7B;
  --ai-purple:  #9537B0;
  --ai-blue:    #515BD4;
  --ai-orange:  #F97B40;

  /* Semantic */
  --success: #22C55E;
  --danger:  #DF1B41;
  --danger-deep: #B8001F;

  /* ==================== GRADIENTS ==================== */
  --grad-hero: linear-gradient(rgba(255,255,255,0) 0%, #ffffff 100%),
               linear-gradient(#E7E1FF 0%, #F1E1E1 88%);
  --grad-peach-mint: linear-gradient(#FDE7DC 0%, #F0FFFF 100%);
  --grad-rose-sky:   linear-gradient(rgba(255,213,230,0.5) 0%, rgba(213,232,255,0.5) 100%);
  --grad-sunset:     linear-gradient(rgba(196,221,255,0.3) 6%, rgba(221,181,111,0.3) 48%, rgba(249,123,64,0.3) 98%);
  --grad-peach-red:  linear-gradient(rgba(255,202,138,0.15) 0%, rgba(184,0,31,0.15) 100%);
  --grad-mobile-cta: linear-gradient(rgba(250,224,197,0.5) 0%, rgba(232,212,241,0.5) 57%, rgba(214,167,255,0.5) 100%);
  --grad-ai-rainbow: linear-gradient(90deg, #FAAD4F 0%, #DD2A7B 35%, #9537B0 62%, #515BD4 100%);
  /* Gradient text — vertical (180°): section heads in Features, About, CTA */
  --grad-text-v: linear-gradient(180deg, rgb(252,167,89) 3.12%, rgb(232,45,86) 17.47%, rgb(162,45,180) 77.07%, rgb(100,61,206) 105.24%);
  /* Gradient text — diagonal (~16°): hero, pricing, FAQ, inline links */
  --grad-text-d: linear-gradient(16deg, #FAAD4F 14.61%, #DD2A7B 39.38%, #9537B0 58.49%, #515BD4 85.39%);
  --grad-image-dim:  linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
  --grad-label-dim:  linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);

  /* ==================== TYPE — FAMILIES ==================== */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Geist', 'Inter', system-ui, sans-serif;

  /* ==================== TYPE — SIZES ==================== */
  --fs-display-xl: 88.57px;   /* hero, e.g. "Africa's first agentic storefront" */
  --fs-display-lg: 73.57px;   /* mobile hero */
  --fs-display-md: 48px;      /* section headline */
  --fs-display-sm: 38px;
  --fs-display-xs: 31px;

  --fs-h1: 28px;              /* feature card headline */
  --fs-h2: 24px;              /* comparison table title, pricing plan name */
  --fs-h3: 20px;              /* video-card title */
  --fs-h4: 18px;              /* pricing value */

  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;

  /* ==================== TYPE — LINE-HEIGHTS / TRACKING ==================== */
  --lh-display-xl: 90.5px;
  --lh-display-md: 54px;
  --lh-display-sm: 43px;
  --lh-tight:      1.1;
  --lh-snug:       1.3;
  --lh-body:       1.5;

  --tr-display: -4.21px;      /* big display headlines */
  --tr-h1:      -0.56px;
  --tr-h2:      -0.36px;
  --tr-h3:      -0.1px;
  --tr-body:     0.16px;
  --tr-eyebrow:  1.2px;       /* UPPERCASE eyebrows, ~10% */

  /* ==================== SPACING / LAYOUT ==================== */
  --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-15: 60px;
  --space-20: 80px;
  --space-25: 100px;

  --content-max: 1168px;
  --section-gutter: 280px;
  --section-pad-y: 100px;

  /* ==================== RADII ==================== */
  --r-pill:   2000px;
  --r-card:   40px;
  --r-tile:   36px;
  --r-media:  29px;
  --r-bubble: 19px;
  --r-ctrl:   12px;
  --r-sm:     8px;

  /* ==================== SHADOWS ==================== */
  --shadow-btn:    0 2px 5px rgba(60,66,87,0.08), 0 1px 1px rgba(0,0,0,0.12);
  --shadow-nav:    0 4px 12px rgba(0,0,0,0.05);
  --shadow-play:   0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10);
  --shadow-pill:   0 2.444px 53.168px rgba(0,0,0,0.15);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);

  /* ==================== Z-INDEX SCALE ==================== */
  --z-chat:    2;
  --z-compare: 5;
  --z-sticky:  100;
  --z-overlay: 198;
  --z-menu:    199;
  --z-nav:     200;
  --z-modal:   600;

  /* ==================== MOTION ==================== */
  --ease-std:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:  160ms;
  --dur:       260ms;
  --dur-slow:  480ms;

  /* ==================== SEMANTIC (role-based) ==================== */
  --fg:        var(--ink);
  --fg-muted:  var(--ink-60);
  --fg-subtle: var(--ink-40);
  --fg-inverse: var(--paper);

  --bg:           var(--paper);
  --bg-muted:     var(--grey-100);
  --bg-inverse:   var(--ink);
  --bg-hero:      var(--grad-hero);

  --border:       var(--ink-06);
  --border-strong: var(--grey-300);
  --divider:      var(--ink-05);

  --link:         var(--ink);
  --link-hover:   var(--stur-purple);
}

/* ================= RESET ================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }

/* ================= SEMANTIC TYPE CLASSES ================= */

/* Italic display — Playfair, editorial. */
.display-xl, .display-lg, .display-md, .display-sm, .display-xs {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); }
.display-lg { font-size: var(--fs-display-lg); line-height: 1.05; letter-spacing: -3.2px; }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: -2.44px; }
.display-sm { font-size: var(--fs-display-sm); line-height: 1.1;   letter-spacing: -1.6px; }
.display-xs { font-size: var(--fs-display-xs); line-height: 1.15;  letter-spacing: -1.2px; }

/* Feature-card headlines (Inter Bold, 28px/36). Non-italic. */
h1, .h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 36px;
  letter-spacing: var(--tr-h1);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: var(--tr-h2);
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--tr-h3);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.33;
  color: var(--fg);
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  letter-spacing: var(--tr-body);
  color: var(--fg);
  margin: 0;
}
.body-bold { font-weight: 700; }
.body-sm { font-size: var(--fs-body); line-height: 21px; font-weight: 700; }
.body-xs { font-size: var(--fs-xs); line-height: 16px; font-weight: 500; letter-spacing: var(--tr-eyebrow); }

/* Eyebrow — UPPERCASE, bold, muted ink. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  letter-spacing: var(--tr-body);
  color: var(--fg-subtle);
  text-transform: uppercase;
}
.eyebrow-sm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: var(--tr-eyebrow);
  color: var(--grey-500);
  text-transform: uppercase;
}

/* Muted helper (secondary body, pricing subtitle, etc.) */
.muted { color: var(--ink-60); }

/* Price (₦) value + cadence */
.price-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 24px;
  color: var(--fg);
}

/* AI gradient text (for rainbow "stur AI" labels / badges) */
.ai-gradient-text {
  background: var(--grad-ai-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reusable gradient text clip — pair with a background-image in your component CSS */
.grad-text {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Link (inline) */
a, .link {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover, .link:hover { color: var(--link-hover); }