/* =========================================================
   dub2.ai — Colors & Type tokens
   A warm, friendly-but-strong system built around layered reds
   and a humanist geometric typeface (Kodchasan).
   ========================================================= */

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

:root {
  /* ------------------------------------------------------
     CORE BRAND — derived from logo SVG gradient stops
     ------------------------------------------------------ */
  --brand-ember:     #C21500;  /* deep red, wordmark + outer ring */
  --brand-coral:     #EA4A35;  /* middle ring */
  --brand-flare:     #FF604C;  /* inner glow, radial gradient start */
  --brand-blush:     #FFE4DE;  /* tint, backgrounds */
  --brand-cream:     #FFF7F3;  /* warm off-white, canvas */

  /* Extended reds (oklch-harmonized) */
  --red-50:   oklch(97.5% 0.015 25);
  --red-100:  oklch(94% 0.035 26);
  --red-200:  oklch(88% 0.075 27);
  --red-300:  oklch(80% 0.12 28);
  --red-400:  oklch(71% 0.175 29);   /* ≈ flare */
  --red-500:  oklch(64% 0.2 30);     /* ≈ coral */
  --red-600:  oklch(54% 0.21 32);    /* ≈ ember */
  --red-700:  oklch(46% 0.18 34);
  --red-800:  oklch(36% 0.14 36);
  --red-900:  oklch(26% 0.10 38);

  /* Signature gradient from the logo */
  --brand-gradient: radial-gradient(circle at 30% 30%, #FF604C 0%, #C21500 74%);
  --brand-gradient-linear: linear-gradient(135deg, #FF604C 0%, #EA4A35 45%, #C21500 100%);

  /* ------------------------------------------------------
     NEUTRALS — warm-tinted (slight red undertone)
     ------------------------------------------------------ */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FDFAF8;
  --neutral-50:   #FAF5F2;
  --neutral-100:  #F3ECE7;
  --neutral-200:  #E8DED7;
  --neutral-300:  #D4C6BD;
  --neutral-400:  #A89A91;
  --neutral-500:  #7A6E66;
  --neutral-600:  #554942;
  --neutral-700:  #3C322D;
  --neutral-800:  #26201C;
  --neutral-900:  #17120F;

  /* ------------------------------------------------------
     SEMANTIC — foreground / background / border
     ------------------------------------------------------ */
  --bg-canvas:       var(--brand-cream);
  --bg-surface:      var(--neutral-0);
  --bg-raised:       var(--neutral-0);
  --bg-sunken:       var(--neutral-50);
  --bg-inverse:      var(--neutral-900);
  --bg-brand-soft:   var(--brand-blush);
  --bg-brand:        var(--brand-ember);

  --fg-1:    var(--neutral-900);    /* primary text */
  --fg-2:    var(--neutral-700);    /* body */
  --fg-3:    var(--neutral-500);    /* secondary / meta */
  --fg-4:    var(--neutral-400);    /* placeholder */
  --fg-on-brand: #FFFFFF;
  --fg-brand:    var(--brand-ember);
  --fg-link:     var(--brand-ember);

  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --border-strong: var(--neutral-800);
  --border-brand:  var(--brand-ember);

  /* ------------------------------------------------------
     STATUS
     ------------------------------------------------------ */
  --success:  #1F8A5C;
  --success-bg: #E6F4EC;
  --warning:  #B8761A;
  --warning-bg: #FFF1DB;
  --danger:   var(--brand-ember);
  --danger-bg: var(--brand-blush);
  --info:     #2F5DB8;
  --info-bg:  #E4ECFA;

  /* ------------------------------------------------------
     ELEVATION / SHADOW  (warm, red-tinted shadows)
     ------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(87, 22, 10, 0.06);
  --shadow-sm:  0 1px 3px rgba(87, 22, 10, 0.08), 0 1px 2px rgba(87, 22, 10, 0.04);
  --shadow-md:  0 4px 12px rgba(87, 22, 10, 0.08), 0 2px 4px rgba(87, 22, 10, 0.04);
  --shadow-lg:  0 12px 32px rgba(87, 22, 10, 0.12), 0 4px 8px rgba(87, 22, 10, 0.05);
  --shadow-xl:  0 24px 64px rgba(87, 22, 10, 0.18), 0 8px 16px rgba(87, 22, 10, 0.06);
  --ring-focus: 0 0 0 3px rgba(255, 96, 76, 0.35);

  /* ------------------------------------------------------
     RADIUS  (friendly, medium-rounded — not pill-y)
     ------------------------------------------------------ */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ------------------------------------------------------
     SPACING (4px base)
     ------------------------------------------------------ */
  --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: 'Kodchasan', system-ui, sans-serif;      /* logo + headlines */
  --font-body:    'Manrope', system-ui, sans-serif;        /* paragraphs, UI */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ------------------------------------------------------
     TYPE SCALE — clamp() for responsive display sizes
     ------------------------------------------------------ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  44px;
  --text-5xl:  56px;
  --text-6xl:  72px;
  --text-display: clamp(48px, 7vw, 96px);

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ------------------------------------------------------
     MOTION
     ------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Apply directly on elements OR via @extend-like composition.
   ========================================================= */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; }
body { font-size: var(--text-base); line-height: var(--lh-normal); }

/* Display = dub2.ai wordmark family, used sparingly */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;              /* Kodchasan regular matches logo */
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.body-lg { font-size: var(--text-lg); line-height: var(--lh-normal); }
.body-sm { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-ember);
}

.meta {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--red-700); }

::selection { background: var(--brand-flare); color: white; }