/**
 * BildMart Design System — Colors & Typography
 * Procuredge Technologies Pvt Ltd
 * Font: Plus Jakarta Sans (primary — headings + body + UI)
 *
 * Phase FF-1 — copied verbatim from Claude design bundle so the
 * customer-facing site inherits the exact palette + typography
 * scale that every future page will extend.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=Syne:wght@600;700;800&display=swap');

/* ─── BASE COLOR TOKENS ──────────────────────────────────────────────── */
:root {
  /* Brand primaries */
  --bm-navy:        #1A2040;
  --bm-teal:        #2DA884;
  --bm-blue:        #2563EB;
  --bm-orange:      #F97316;

  /* Neutrals */
  --bm-slate:       #64748B;
  --bm-mist:        #F1F5F9;
  --bm-light:       #F8FAFC;
  --bm-white:       #FFFFFF;

  /* Tints */
  --bm-teal-light:  #E6F7F2;
  --bm-blue-light:  rgba(37, 99, 235, 0.08);
  --bm-navy-light:  rgba(26, 32, 64, 0.08);
  --bm-orange-light:rgba(249, 115, 22, 0.08);

  /* Borders & Dividers */
  --bm-border:      rgba(0, 0, 0, 0.08);
  --bm-border-mid:  rgba(0, 0, 0, 0.12);
  --bm-divider:     #E2E8F0;

  /* Text */
  --bm-text-primary:   #1A2040;
  --bm-text-secondary: #64748B;
  --bm-text-muted:     rgba(26, 32, 64, 0.45);
  --bm-text-on-dark:   rgba(255, 255, 255, 0.90);
  --bm-text-on-dark-2: rgba(255, 255, 255, 0.55);
  --bm-text-on-dark-3: rgba(255, 255, 255, 0.35);

  /* Semantic / Status */
  --bm-success:     #22C55E;
  --bm-success-bg:  rgba(34, 197, 94, 0.08);
  --bm-error:       #EF4444;
  --bm-error-bg:    rgba(239, 68, 68, 0.08);
  --bm-warning:     #F59E0B;
  --bm-warning-bg:  rgba(245, 158, 11, 0.08);
}

/* ─── SEMANTIC ALIASES ───────────────────────────────────────────────── */
:root {
  --color-bg:           var(--bm-light);
  --color-surface:      var(--bm-white);
  --color-surface-alt:  var(--bm-mist);
  --color-surface-dark: var(--bm-navy);

  --color-fg:           var(--bm-text-primary);
  --color-fg-2:         var(--bm-text-secondary);
  --color-fg-muted:     var(--bm-text-muted);

  --color-accent:       var(--bm-teal);
  --color-accent-light: var(--bm-teal-light);
  --color-cta:          var(--bm-blue);
  --color-signal:       var(--bm-orange);

  --color-border:       var(--bm-border);
  --color-divider:      var(--bm-divider);
}

/* ─── TYPOGRAPHY TOKENS ──────────────────────────────────────────────── */
:root {
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-syne:    'Syne', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  48px;
  --text-6xl:  56px;

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

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.7;

  --tracking-tight:  -1px;
  --tracking-normal: 0px;
  --tracking-wide:   0.5px;
  --tracking-wider:  1px;
  --tracking-widest: 3px;
}

/* ─── SPACING TOKENS ─────────────────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
}

/* ─── BORDER RADIUS TOKENS ───────────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
}

/* ─── BASE RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
}