/* ==========================================================================
   Bature Digital — Foundations
   Brand colors and typography tokens.
   Tagline: "Clicks. Conversions. Clients."
   ========================================================================== */

/* ---- Webfonts ---- */
/* Wordmark uses a thin, geometric, rounded sans-serif. Quicksand is the
   closest free match to the bature wordmark; Inter is used for UI/body. */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ============================
     COLOR — BRAND
     ============================ */
  /* Primary deep purple — sampled from the official logo. */
  --brand-purple-900: #1E0438;
  --brand-purple-800: #2D0A52;
  --brand-purple-700: #3B0E6A;   /* core brand purple */
  --brand-purple-600: #4A0E85;
  --brand-purple-500: #5B14A0;
  --brand-purple-400: #7B3DB8;
  --brand-purple-300: #A77FD0;
  --brand-purple-200: #D4BFE6;
  --brand-purple-100: #ECE2F5;
  --brand-purple-50:  #F7F3FB;

  /* Mustard — secondary brand accent (from yellow logo). */
  --brand-mustard-700: #C9A412;
  --brand-mustard-600: #E5BB17;
  --brand-mustard-500: #F1C518;   /* core mustard */
  --brand-mustard-400: #F5D24A;
  --brand-mustard-300: #FAE38A;
  --brand-mustard-200: #FCEFB8;
  --brand-mustard-100: #FEF7DC;

  /* Neutrals — warm-cool greys built around the purple. */
  --neutral-1000: #0B0613;
  --neutral-900:  #14101C;
  --neutral-800:  #1F1A2A;
  --neutral-700:  #322B42;
  --neutral-600:  #524A63;
  --neutral-500:  #7A7388;
  --neutral-400:  #A39DAC;
  --neutral-300:  #CAC6CF;
  --neutral-200:  #E6E3EA;
  --neutral-100:  #F2F0F5;
  --neutral-50:   #FAF9FC;
  --white:        #FFFFFF;

  /* Semantic — UI state */
  --success:  #1FA866;
  --warning:  #E5A20B;
  --danger:   #D43A2F;
  --info:     #3673D6;

  /* ============================
     COLOR — SEMANTIC TOKENS
     ============================ */
  --bg:           var(--white);
  --bg-soft:      var(--neutral-50);
  --bg-muted:     var(--neutral-100);
  --bg-inverse:   var(--brand-purple-700);
  --bg-inverse-deep: var(--brand-purple-900);

  --fg:           var(--neutral-900);
  --fg-muted:     var(--neutral-600);
  --fg-subtle:    var(--neutral-500);
  --fg-on-brand:  var(--white);
  --fg-on-accent: var(--neutral-1000);

  --accent:       var(--brand-purple-700);
  --accent-hover: var(--brand-purple-600);
  --accent-press: var(--brand-purple-800);
  --accent-soft:  var(--brand-purple-100);
  --on-accent:    var(--white);

  --highlight:        var(--brand-mustard-500);
  --highlight-hover:  var(--brand-mustard-400);
  --highlight-soft:   var(--brand-mustard-100);

  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-brand: var(--brand-purple-700);

  --link:         var(--brand-purple-700);
  --link-hover:   var(--brand-purple-500);

  /* ============================
     TYPOGRAPHY — FAMILIES
     ============================ */
  /* Display / wordmark — thin, geometric, rounded. */
  --font-display: "Quicksand", "Comfortaa", system-ui, sans-serif;
  /* UI / body — neutral, modern, highly legible. */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono — used sparingly for data, numbers, code. */
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ============================
     TYPOGRAPHY — SCALE
     Type scale tuned for marketing — generous display sizes,
     tight body, comfortable line-heights.
     ============================ */
  --fs-display-xl: clamp(48px, 6vw, 80px);
  --fs-display-l:  clamp(40px, 5vw, 64px);
  --fs-display-m:  clamp(32px, 4vw, 48px);
  --fs-h1:         clamp(28px, 3.2vw, 40px);
  --fs-h2:         clamp(24px, 2.6vw, 32px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-h5:         18px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-eyebrow:    13px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;  /* used for the "DIGITAL" mark */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ============================
     SPACING — 4pt scale
     ============================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ============================
     RADII
     ============================ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ============================
     SHADOWS — soft, purple-tinted
     ============================ */
  --shadow-xs: 0 1px 2px rgba(30, 4, 56, 0.06);
  --shadow-sm: 0 2px 6px rgba(30, 4, 56, 0.08);
  --shadow-md: 0 8px 20px rgba(30, 4, 56, 0.10);
  --shadow-lg: 0 18px 40px rgba(30, 4, 56, 0.14);
  --shadow-xl: 0 30px 60px rgba(30, 4, 56, 0.18);
  --shadow-brand: 0 16px 40px rgba(59, 14, 106, 0.30);
  --shadow-mustard: 0 12px 30px rgba(241, 197, 24, 0.28);

  /* ============================
     MOTION
     ============================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============================
     LAYOUT
     ============================ */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1280px;
  --gutter:           clamp(16px, 4vw, 48px);
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply these via classes (.h1, .body, .eyebrow…) so they stay
   composable in JSX components.
   ========================================================= */
.display-xl, .h-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.display-l {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.display-m {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-m);
  line-height: var(--lh-snug);
}
h1, .h1 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0;
}
.body-l {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.body-s {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* "DIGITAL" wordmark style — wide tracked caps under "bature" */
.wordmark-tag {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: 0.55em;
  text-transform: uppercase;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}