/* ---------------------------------------------------------------------------
   Sturdy Bid — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.

   Three layers:
     1. Raw scales (--steel-50 … --steel-900, etc) — never reference directly.
     2. Semantic tokens (--fg-1, --bg-page, --brand, --shadow-card) — reference these.
     3. Element-level vars (--h1, --code, --p) — pre-baked typography presets.

   Dark-mode flips the semantic layer; raw scales never change.
   --------------------------------------------------------------------------- */

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

:root {
  /* ===== Raw scales ===== */

  /* Steel blue — primary brand */
  --steel-50:  #EFF4FB;
  --steel-100: #DBE6F3;
  --steel-200: #B7CDE8;
  --steel-300: #84A9D6;
  --steel-400: #4F82C2;
  --steel-500: #1E60AE;
  --steel-600: #ff790e; /* brand */
  --steel-700: #003D8F;
  --steel-800: #002C6A;
  --steel-900: #001F4A;

  /* Ink (neutral cool gray) */
  --ink-50:  #F7F8FB;
  --ink-100: #F1F3F7;
  --ink-200: #E5E7EB;
  --ink-300: #D1D5DB;
  --ink-400: #9CA3AF;
  --ink-500: #6B7280;
  --ink-600: #4B5563;
  --ink-700: #374151;
  --ink-800: #1F2937;
  --ink-900: #0F172A;
  --ink-950: #0B0F17;

  /* Amber — Better tier ("Most Popular") */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-600: #B45309;
  --amber-700: #92400E;

  /* Royal purple — Best tier ("Premium") */
  --royal-50:  #FAF5FF;
  --royal-100: #F3E8FF;
  --royal-200: #E9D5FF;
  --royal-700: #6B21A8;
  --royal-800: #581C87;

  /* Status */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-600: #16A34A;
  --green-700: #15803D;
  --red-50:    #FEF2F2;
  --red-100:   #FEE2E2;
  --red-600:   #DC2626;
  --red-700:   #B91C1C;

  /* ===== Semantic tokens (LIGHT) ===== */
  --bg-page:    var(--ink-50);
  --bg-surface: #FFFFFF;
  --bg-panel:   #FFFFFF;
  --bg-sunken:  var(--ink-100);
  --bg-hover:   var(--ink-50);

  --fg-1:       var(--ink-900); /* primary body */
  --fg-2:       var(--ink-700); /* strong secondary */
  --fg-3:       var(--ink-500); /* muted */
  --fg-4:       var(--ink-400); /* placeholder, disabled */
  --fg-on-brand:#FFFFFF;

  --border-1:   var(--ink-200); /* default hairline */
  --border-2:   var(--ink-300); /* hover */
  --border-strong: var(--ink-400);

  --brand:        var(--steel-600);
  --brand-hover:  var(--steel-700);
  --brand-tint:   var(--steel-50);

  --success: var(--green-600);
  --warning: var(--amber-600);
  --danger:  var(--red-600);

  /* ===== Spacing (4px grid) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ===== Radius ===== */
  --r-sm:   6px;  /* inputs, pills */
  --r-md:   10px; /* panels */
  --r-lg:   12px; /* admin cards, modals */
  --r-xl:   16px; /* customer cards */
  --r-2xl:  20px; /* hero blocks */
  --r-pill: 9999px;

  /* ===== Shadow & elevation ===== */
  --shadow-card:        0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-card-hover:  0 4px 12px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.08);
  --shadow-card-select: 0 0 0 2px var(--brand), 0 8px 20px rgba(0,0,0,0.08);
  --shadow-overlay:     0 20px 40px rgba(0,0,0,0.20);
  --shadow-inset:       inset 0 1px 0 rgba(255,255,255,0.04);

  /* ===== Motion ===== */
  --ease:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 300ms;

  /* ===== Type — families ===== */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Type — scale (size / line-height / tracking / weight) ===== */
  --t-display-lh: 1.05; --t-display-tr: -0.02em;
  --t-h-lh: 1.15;       --t-h-tr: -0.01em;
  --t-body-lh: 1.5;     --t-body-tr: 0;
  --t-micro-lh: 1.2;    --t-micro-tr: 0.04em;
}

/* ===== Dark mode overrides (semantic only) ===== */
:root[data-theme="dark"],
.dark {
  --bg-page:    var(--ink-950);
  --bg-surface: var(--ink-900);
  --bg-panel:   #111827;
  --bg-sunken:  #0B1220;
  --bg-hover:   #1A2235;

  --fg-1:       #F3F4F6;
  --fg-2:       #D1D5DB;
  --fg-3:       #9CA3AF;
  --fg-4:       #6B7280;

  --border-1:   #1F2937;
  --border-2:   #374151;
  --border-strong: #4B5563;

  --brand:        #3B82F6; /* lifted for contrast on dark */
  --brand-hover:  #60A5FA;
  --brand-tint:   rgba(59, 130, 246, 0.12);

  --shadow-card:        0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.20);
  --shadow-card-hover:  0 4px 12px rgba(0,0,0,0.35), 0 12px 24px rgba(0,0,0,0.25);
  --shadow-card-select: 0 0 0 2px var(--brand), 0 8px 20px rgba(0,0,0,0.30);
  --shadow-overlay:     0 24px 48px rgba(0,0,0,0.50);
}

/* ===== Element presets =====
   Use these as ready-made classes OR copy the rules into your component CSS. */

html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.h-display, h1.display {
  font-size: 56px; font-weight: 700;
  line-height: var(--t-display-lh); letter-spacing: var(--t-display-tr);
}
.h-1, h1 {
  font-size: 32px; font-weight: 700;
  line-height: var(--t-h-lh); letter-spacing: var(--t-h-tr);
}
.h-2, h2 {
  font-size: 24px; font-weight: 700;
  line-height: var(--t-h-lh); letter-spacing: var(--t-h-tr);
}
.h-3, h3 {
  font-size: 20px; font-weight: 600;
  line-height: var(--t-h-lh); letter-spacing: var(--t-h-tr);
}
.h-4, h4 {
  font-size: 16px; font-weight: 600;
  line-height: 1.3;
}
.p, p, .body {
  font-size: 14px; font-weight: 400;
  line-height: var(--t-body-lh); color: var(--fg-1);
}
.body-lg { font-size: 16px; line-height: 1.5; }
.body-sm { font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.muted   { color: var(--fg-3); }

.label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--t-micro-tr);
  color: var(--fg-3);
  line-height: var(--t-micro-lh);
}

.code, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Pill — used for status, tier badges, role badges */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--t-micro-tr);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}

/* Focus — applied via :focus-visible everywhere */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ===========================================================================
   UI-Kit aliases
   The customer + admin UI kits use a friendlier shorthand naming convention
   (--brand-600, --ink-1, --surface-1, --bg-2, etc). These aliases re-export
   the canonical tokens above under those names so the kits resolve. If you're
   writing new code, prefer the canonical names (--steel-600, --fg-1, etc).
   =========================================================================== */
:root {
  /* Brand scale */
  --brand-50:  var(--steel-50);
  --brand-100: var(--steel-100);
  --brand-200: var(--steel-200);
  --brand-300: var(--steel-300);
  --brand-400: var(--steel-400);
  --brand-500: var(--steel-500);
  --brand-600: var(--steel-600);
  --brand-700: var(--steel-700);
  --brand-800: var(--steel-800);
  --brand-900: var(--steel-900);

  /* Foreground (ink) — kits index 1..4 from strongest → muted */
  --ink-1: var(--fg-1);
  --ink-2: var(--fg-2);
  --ink-3: var(--fg-3);
  --ink-4: var(--fg-4);

  /* Surfaces + backgrounds */
  --surface-1: var(--bg-surface);
  --surface-2: var(--bg-panel);
  --bg-1: var(--bg-page);
  --bg-2: var(--bg-page);
  --bg-3: var(--bg-sunken);

  /* Display font alias */
  --font-display: var(--font-sans);

  /* Radius shorthand */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* Shadow shorthand */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-overlay);

  /* Status — full scales */
  --success-50:  var(--green-50);
  --success-100: var(--green-100);
  --success-500: var(--green-600);
  --success-600: var(--green-600);
  --success-700: var(--green-700);

  --warning-50:  var(--amber-50);
  --warning-100: var(--amber-100);
  --warning-500: var(--amber-600);
  --warning-600: var(--amber-600);
  --warning-700: var(--amber-700);

  --danger-50:  var(--red-50);
  --danger-100: var(--red-100);
  --danger-500: var(--red-600);
  --danger-600: var(--red-600);
  --danger-700: var(--red-700);
}

/* Dark-mode aliases — admin kit uses body[data-theme="dark"] */
body[data-theme="dark"] {
  --ink-1: #F3F4F6;
  --ink-2: #D1D5DB;
  --ink-3: #9CA3AF;
  --ink-4: #6B7280;
  --surface-1: #111827;
  --surface-2: #1A2235;
  --bg-1: var(--ink-950);
  --bg-2: var(--ink-950);
  --bg-3: #0B1220;
  --border-1: #1F2937;
  --border-2: #374151;
  --brand-50:  rgba(59, 130, 246, 0.10);
  --brand-100: rgba(59, 130, 246, 0.18);
  --brand-500: #60A5FA;
  --brand-600: #3B82F6;
  --brand-700: #2563EB;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.50);
}