/* ==========================================================================
   WafiSoftware Design System — colors & type
   Drop into any HTML/Next.js project; consume via var(--name).
   ========================================================================== */

/* Brand sans — Space Grotesk (self-hosted). Variable file is the source of truth;
   static weights are loaded as fallbacks where the variable axis isn't available. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations'),
       url('../fonts/SpaceGrotesk-Variable.woff')  format('woff-variations'),
       url('../fonts/SpaceGrotesk-Variable.ttf')   format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Light.woff2') format('woff2'), url('../fonts/SpaceGrotesk-Light.woff') format('woff'), url('../fonts/SpaceGrotesk-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2'), url('../fonts/SpaceGrotesk-Regular.woff') format('woff'), url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2'), url('../fonts/SpaceGrotesk-Medium.woff') format('woff'), url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'), url('../fonts/SpaceGrotesk-SemiBold.woff') format('woff'), url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2'), url('../fonts/SpaceGrotesk-Bold.woff') format('woff'), url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Bangla + mono still come from Google Fonts CDN (no brand files supplied). */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* --- BRAND -------------------------------------------------------------- */
  /* Deep blue — primary trust color. Spec hex from brief; pairs with #FFF AAA. */
  --brand-blue-50:  #EEF1FA;
  --brand-blue-100: #DBE2F4;
  --brand-blue-200: #B5C2E6;
  --brand-blue-300: #8597D1;
  --brand-blue-400: #5772BC;
  --brand-blue-500: #2E4BAA;
  --brand-blue-600: #1E3A8A;   /* primary */
  --brand-blue-700: #172B66;
  --brand-blue-800: #111F4A;
  --brand-blue-900: #0B1432;

  /* Warm orange — creative/publishing accent. */
  --brand-orange-50:  #FFF1E6;
  --brand-orange-100: #FFE0CB;
  --brand-orange-200: #FFC195;
  --brand-orange-300: #FDA15E;
  --brand-orange-400: #FB8736;
  --brand-orange-500: #F97316;   /* accent */
  --brand-orange-600: #E1610F;
  --brand-orange-700: #B94E0C;

  /* Logo-true hues (for brand assets only — not for product UI). */
  --logo-blue:   #4956A6;
  --logo-coral:  #EE6B4D;

  /* --- INK / NEUTRAL ----------------------------------------------------- */
  --ink-900: #0B1020;
  --ink-800: #161D33;
  --ink-700: #2A3142;
  --ink-600: #404758;
  --ink-500: #5C6477;
  --ink-400: #828A9C;
  --ink-300: #B6BBC7;
  --ink-200: #DADEE6;
  --ink-100: #ECEFF4;
  --ink-50:  #F7F8FB;
  --ink-0:   #FFFFFF;

  /* --- SURFACE ----------------------------------------------------------- */
  --bg-app:    var(--ink-0);
  --bg-soft:   var(--ink-50);
  --bg-tint:   var(--brand-blue-50);
  --bg-dark:   var(--brand-blue-700);

  /* --- SEMANTIC FG ------------------------------------------------------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* body */
  --fg-3: var(--ink-500);   /* secondary / metadata */
  --fg-4: var(--ink-400);   /* placeholder */
  --fg-disabled: var(--ink-300);
  --fg-on-dark: var(--ink-0);
  --fg-on-brand: var(--ink-0);

  --link: var(--brand-blue-600);
  --link-hover: var(--brand-blue-500);

  /* --- STATE ------------------------------------------------------------- */
  --success: #16A34A;
  --success-bg: #ECFDF5;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --danger:  #DC2626;
  --danger-bg: #FEF2F2;
  --info:    var(--brand-blue-600);
  --info-bg: var(--brand-blue-50);

  /* --- BORDER ------------------------------------------------------------ */
  --border-soft:   rgba(11, 16, 32, 0.06);
  --border-card:   rgba(11, 16, 32, 0.08);
  --border-strong: rgba(11, 16, 32, 0.14);
  --border-focus:  var(--brand-blue-500);

  /* --- ELEVATION --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11,16,32,0.04), 0 1px 3px rgba(11,16,32,0.06);
  --shadow-md: 0 4px 12px rgba(11,16,32,0.06), 0 2px 4px rgba(11,16,32,0.04);
  --shadow-lg: 0 24px 48px -12px rgba(30,58,138,0.18);
  --shadow-xl: 0 36px 80px -24px rgba(30,58,138,0.28);
  --ring-focus: 0 0 0 3px rgba(30,58,138,0.25);

  /* --- RADII ------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- SPACING (4-px 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;
  --space-32: 128px;

  /* --- TYPE FAMILIES ----------------------------------------------------- */
  --font-sans:    'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-bangla:  'Hind Siliguri', 'Space Grotesk', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* --- TYPE SCALE -------------------------------------------------------- */
  --fs-display:  clamp(40px, 5vw, 64px);
  --fs-h1:       clamp(32px, 4vw, 48px);
  --fs-h2:       clamp(26px, 3vw, 36px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-overline: 12px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --tracking-display: -0.025em;
  --tracking-heading: -0.02em;
  --tracking-body:    0;
  --tracking-overline: 0.08em;

  /* --- MOTION ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:  120ms;
  --dur-base:   220ms;
  --dur-enter:  400ms;
}

/* ==========================================================================
   Semantic element styles — opt-in via .ds (or :root if you want global).
   ========================================================================== */

.ds, .ds * { box-sizing: border-box; }

.ds {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

.ds h1, .ds .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

.ds h2, .ds .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

.ds h3, .ds .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

.ds h4, .ds .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

.ds .display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 800;
  color: var(--fg-1);
}

.ds p { margin: 0; color: var(--fg-2); }

.ds .lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
}

.ds .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

.ds .overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-blue-600);
}

.ds code, .ds .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--ink-50);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}

.ds .bn { font-family: var(--font-bangla); }

.ds a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.ds a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}