/* =============================================================================
   AfriBeats Design System — Colors + Type
   -----------------------------------------------------------------------------
   Variables in three layers:
     1) Raw palette  (--ab-yam-500, --ab-hibiscus-500, …)
     2) Semantic     (--bg, --fg, --accent, --surface-raised, …)
     3) Components   (--btn-bg, --chip-bg, --bubble-out-bg, …)
   Type is the same — palette → semantic → component.
   ============================================================================= */

/* ----------- 0. Fonts ----------- */

@font-face {
  font-family: "Boldonse";
  src: url("./fonts/Boldonse-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: "Space Grotesk"; src: url("./fonts/SpaceGrotesk-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("./fonts/SpaceGrotesk-Medium.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("./fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("./fonts/SpaceGrotesk-Bold.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "DM Sans"; src: url("./fonts/DMSans-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("./fonts/DMSans-Medium.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("./fonts/DMSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("./fonts/DMSans-Bold.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }


/* ============================================================================
   1. RAW PALETTE
   Ten signature colours, each on a 50→900 ramp. Names are physical/cultural,
   not semantic — colours can be reassigned without renaming the ramp.
   ============================================================================ */

:root {
  /* --- Sun: hot, energetic yellow. The hero. --- */
  --ab-sun-50:  #fff8e1;
  --ab-sun-100: #ffeeb0;
  --ab-sun-200: #ffe175;
  --ab-sun-300: #ffd23f;
  --ab-sun-400: #ffc21a;
  --ab-sun-500: #f5b400;   /* signature */
  --ab-sun-600: #d99500;
  --ab-sun-700: #a36c00;
  --ab-sun-800: #6e4800;
  --ab-sun-900: #3d2700;

  /* --- Hibiscus: hot pink / magenta. Yinka's pink. --- */
  --ab-hibiscus-50:  #ffe7ee;
  --ab-hibiscus-100: #ffbcd1;
  --ab-hibiscus-200: #ff85ad;
  --ab-hibiscus-300: #ff4f8a;
  --ab-hibiscus-400: #ff2370;
  --ab-hibiscus-500: #e6125c;  /* signature */
  --ab-hibiscus-600: #b80c49;
  --ab-hibiscus-700: #870834;
  --ab-hibiscus-800: #570520;
  --ab-hibiscus-900: #2c0210;

  /* --- Tangerine: deep orange / kola. --- */
  --ab-tangerine-50:  #fff0e0;
  --ab-tangerine-100: #ffd2a3;
  --ab-tangerine-200: #ffae66;
  --ab-tangerine-300: #ff8a29;
  --ab-tangerine-400: #ff6b00;
  --ab-tangerine-500: #e85d00;  /* signature */
  --ab-tangerine-600: #bf4700;
  --ab-tangerine-700: #8c3200;
  --ab-tangerine-800: #5c2000;
  --ab-tangerine-900: #2e1000;

  /* --- Indigo: electric ultramarine. The Xhosa-beadwork blue. --- */
  --ab-indigo-50:  #e1ebff;
  --ab-indigo-100: #b3c8ff;
  --ab-indigo-200: #80a2ff;
  --ab-indigo-300: #4c7cff;
  --ab-indigo-400: #2659ff;
  --ab-indigo-500: #0e3ee8;  /* signature */
  --ab-indigo-600: #0b30b8;
  --ab-indigo-700: #082489;
  --ab-indigo-800: #05165a;
  --ab-indigo-900: #020a2e;

  /* --- Baobab: deep bottle / afro green. --- */
  --ab-baobab-50:  #e3f4e9;
  --ab-baobab-100: #b8e1c5;
  --ab-baobab-200: #87cb9d;
  --ab-baobab-300: #4eb273;
  --ab-baobab-400: #1f9d52;
  --ab-baobab-500: #0d7a3e;  /* signature */
  --ab-baobab-600: #0a5f31;
  --ab-baobab-700: #074623;
  --ab-baobab-800: #042d17;
  --ab-baobab-900: #02160b;

  /* --- Lilac: dusty mauve. From Yinka's grandmother palette. --- */
  --ab-lilac-50:  #f3ecff;
  --ab-lilac-100: #dfcfff;
  --ab-lilac-200: #c4a8ff;
  --ab-lilac-300: #a481ff;
  --ab-lilac-400: #8a64ff;
  --ab-lilac-500: #6f4be8;  /* signature */
  --ab-lilac-600: #553abf;
  --ab-lilac-700: #3f2b8c;
  --ab-lilac-800: #281b59;
  --ab-lilac-900: #130d2c;

  /* --- Cream: warm ivory paper. The default light surface. --- */
  --ab-cream-50:  #fffdf7;
  --ab-cream-100: #fdf6e6;
  --ab-cream-200: #f8ecd0;
  --ab-cream-300: #f0dfb5;
  --ab-cream-400: #e6cf92;

  /* --- Ink: warm aubergine-black. Never #000. --- */
  --ab-ink-50:  #f4f1f0;
  --ab-ink-100: #ddd6d3;
  --ab-ink-200: #b8aba7;
  --ab-ink-300: #8c7c77;
  --ab-ink-400: #5e504c;
  --ab-ink-500: #3a302d;
  --ab-ink-600: #2a221f;
  --ab-ink-700: #1d1715;
  --ab-ink-800: #120e0c;
  --ab-ink-900: #0a0706;   /* deepest — body bg in dark mode */

  /* --- Semantic helpers (raw) --- */
  --ab-success: var(--ab-baobab-500);
  --ab-warning: var(--ab-sun-500);
  --ab-danger:  var(--ab-hibiscus-500);
  --ab-info:    var(--ab-indigo-500);


  /* ============================================================================
     2. SEMANTIC TOKENS — light theme by default
     ============================================================================ */

  /* Backgrounds */
  --bg:              var(--ab-cream-100);     /* paper. main app bg. */
  --bg-elevated:     #ffffff;                 /* cards, surfaces lifted off the paper */
  --bg-sunken:       var(--ab-cream-200);     /* inset wells, secondary panels */
  --bg-inverse:      var(--ab-ink-700);       /* dark bands on light pages */

  /* Foregrounds */
  --fg:              var(--ab-ink-700);       /* primary body text */
  --fg-muted:        var(--ab-ink-400);       /* secondary text */
  --fg-subtle:       var(--ab-ink-300);       /* tertiary, captions */
  --fg-inverse:      var(--ab-cream-100);     /* text on dark */
  --fg-on-accent:    var(--ab-ink-900);       /* text on yellow/orange */
  --fg-on-pink:      #ffffff;                 /* text on hibiscus/indigo */

  /* Brand accents (mapped to semantic roles) */
  --accent:          var(--ab-sun-500);       /* primary brand — sun yellow */
  --accent-pressed:  var(--ab-sun-600);
  --accent-soft:     var(--ab-sun-100);

  --accent-2:        var(--ab-hibiscus-500);  /* secondary — hibiscus */
  --accent-2-pressed: var(--ab-hibiscus-600);
  --accent-2-soft:   var(--ab-hibiscus-100);

  --accent-3:        var(--ab-indigo-500);    /* tertiary — indigo */
  --accent-3-soft:   var(--ab-indigo-100);

  --accent-4:        var(--ab-tangerine-500); /* fourth — tangerine */
  --accent-4-soft:   var(--ab-tangerine-100);

  /* Borders / lines */
  --border:          var(--ab-ink-200);
  --border-strong:   var(--ab-ink-700);       /* the hard black outline that defines cards */
  --border-soft:     var(--ab-cream-300);

  /* Status */
  --success:         var(--ab-baobab-500);
  --success-soft:    var(--ab-baobab-50);
  --warning:         var(--ab-sun-500);
  --warning-soft:    var(--ab-sun-50);
  --danger:          var(--ab-hibiscus-500);
  --danger-soft:     var(--ab-hibiscus-50);
  --info:            var(--ab-indigo-500);
  --info-soft:       var(--ab-indigo-50);

  /* Focus ring */
  --focus-ring:      var(--ab-indigo-500);


  /* ============================================================================
     3. SPACING, RADII, SHADOWS, MOTION
     ============================================================================ */

  /* Spacing — 4-pt base */
  --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;

  /* Radii — softly rounded, NOT pill-everywhere. Mirror the calabash curve. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* Hard "neo-brutalist" border that pairs with the bold palette */
  --line-1: 1.5px;
  --line-2: 2.5px;   /* default card stroke */
  --line-3: 4px;     /* heavy emphasis */

  /* Shadows — these are FLAT/OFFSET (no blur) to match the screen-printed,
     poster-art feel of Yinka Ilori + Lagos print culture. */
  --shadow-stamp-sm:  3px 3px 0 var(--ab-ink-700);
  --shadow-stamp:     5px 5px 0 var(--ab-ink-700);
  --shadow-stamp-lg:  8px 8px 0 var(--ab-ink-700);

  /* Soft shadow for chat / dark UI only — kept very subtle */
  --shadow-soft:      0 2px 8px rgba(10, 7, 6, 0.08);
  --shadow-soft-lg:   0 12px 32px rgba(10, 7, 6, 0.12);

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);     /* default exit */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* bounce on press */
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     400ms;

  /* Z-index ladder */
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;


  /* ============================================================================
     4. TYPE — RAW
     ============================================================================ */

  --font-display: "Boldonse", "Space Grotesk", system-ui, sans-serif;
  --font-heading: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Scale — modular ~1.25, rounded to whole px */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  --leading-tight:  1.08;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;
}


/* ============================================================================
   5. DARK THEME — for the Web Player + late-night vibes
   Triggered by .ab-dark or [data-theme="dark"].
   ============================================================================ */

.ab-dark, [data-theme="dark"] {
  --bg:            var(--ab-ink-900);
  --bg-elevated:   var(--ab-ink-700);
  --bg-sunken:     #060403;
  --bg-inverse:    var(--ab-cream-100);

  --fg:            var(--ab-cream-100);
  --fg-muted:      var(--ab-ink-200);
  --fg-subtle:     var(--ab-ink-300);
  --fg-inverse:    var(--ab-ink-700);
  --fg-on-accent:  var(--ab-ink-900);
  --fg-on-pink:    #ffffff;

  --border:        var(--ab-ink-500);
  --border-strong: var(--ab-cream-100);
  --border-soft:   var(--ab-ink-600);

  --shadow-stamp-sm: 3px 3px 0 var(--ab-cream-100);
  --shadow-stamp:    5px 5px 0 var(--ab-cream-100);
  --shadow-stamp-lg: 8px 8px 0 var(--ab-cream-100);

  --shadow-soft:    0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-soft-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}


/* ============================================================================
   6. SEMANTIC TYPE — element-level defaults
   Use these classes (or copy the rules into element selectors).
   ============================================================================ */

.ab-h1, .ab-h2, .ab-h3, .ab-h4, .ab-display, .ab-eyebrow, .ab-body, .ab-caption, .ab-mono {
  color: var(--fg);
}

.ab-display {                     /* Hero / poster — Boldonse */
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, var(--text-6xl));
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-transform: uppercase;
}

.ab-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

.ab-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

.ab-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}

.ab-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: 600;
}

.ab-eyebrow {                     /* small caps label above headings */
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}

.ab-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  text-wrap: pretty;
}

.ab-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: 400;
  text-wrap: pretty;
}

.ab-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ab-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}

.ab-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}


/* ============================================================================
   7. ELEMENT RESETS (opt-in)
   Apply by wrapping your design root in `.ab-root`.
   ============================================================================ */

.ab-root {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ab-root h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ab-root h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ab-root h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); }
.ab-root h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); }
.ab-root p  { margin: 0 0 var(--space-3); text-wrap: pretty; }
.ab-root small { font-size: var(--text-xs); color: var(--fg-subtle); }
.ab-root code  { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }
.ab-root a { color: var(--accent-3); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.ab-root a:hover { color: var(--ab-indigo-700); }