/* ============================================================
   Small Business Workspace — Foundations
   Colors, type, spacing, radii, shadows.
   Light mode is default; dark mode via [data-theme="dark"].
   ============================================================ */

/* --- Webfonts (Google Fonts fallback — see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PALETTE — Navy ----------
     Anchored on a deep navy. The brand is calm, professional,
     trustworthy — closer to a private bank than a startup.       */
  --navy-950: #0A1628;
  --navy-900: #0F1E36;
  --navy-800: #16294A;
  --navy-700: #1E3A5F;
  --navy-600: #2A4A75;
  --navy-500: #3B5F8F;
  --navy-400: #5C7BA8;
  --navy-300: #8AA1C2;
  --navy-200: #B8C7DB;
  --navy-100: #DDE4EE;
  --navy-50:  #F1F4F9;

  /* ---------- ACCENT — Azure (interactive blue) ------------- */
  --azure-700: #0E58C7;
  --azure-600: #1668DA;
  --azure-500: #2680EB;
  --azure-400: #5599F0;
  --azure-300: #8AB6F5;
  --azure-100: #DCE9FB;
  --azure-50:  #EEF4FE;

  /* ---------- NEUTRALS — slightly cool grays ---------------- */
  --slate-950: #0B0F17;
  --slate-900: #111827;
  --slate-800: #1F2937;
  --slate-700: #374151;
  --slate-600: #4B5563;
  --slate-500: #6B7280;
  --slate-400: #9CA3AF;
  --slate-300: #D1D5DB;
  --slate-200: #E5E7EB;
  --slate-100: #F3F4F6;
  --slate-50:  #F9FAFB;
  --white:     #FFFFFF;

  /* ---------- SEMANTIC — status ----------------------------- */
  --success-700: #15803D;
  --success-600: #16A34A;
  --success-500: #22C55E;
  --success-100: #DCFCE7;
  --success-50:  #F0FDF4;

  --warning-700: #B45309;
  --warning-600: #D97706;
  --warning-500: #F59E0B;
  --warning-100: #FEF3C7;
  --warning-50:  #FFFBEB;

  --danger-700:  #B91C1C;
  --danger-600:  #DC2626;
  --danger-500:  #EF4444;
  --danger-100:  #FEE2E2;
  --danger-50:   #FEF2F2;

  --info-700:    var(--azure-700);
  --info-600:    var(--azure-600);
  --info-100:    var(--azure-100);
  --info-50:     var(--azure-50);

  /* ---------- SEMANTIC — surface, text, border ---------------
     LIGHT mode defaults. Dark mode below redefines these.       */
  --bg-canvas:       #F6F8FB;       /* page background */
  --bg-surface:      #FFFFFF;       /* cards, panels */
  --bg-surface-2:    #F9FAFB;       /* subtle inset */
  --bg-surface-3:    #F1F4F9;       /* hovered rows, chips */
  --bg-overlay:      rgba(10, 22, 40, 0.55);
  --bg-inverse:      var(--navy-950);

  --fg-primary:      var(--slate-900);     /* headings, body */
  --fg-secondary:    var(--slate-700);     /* secondary text */
  --fg-tertiary:     var(--slate-500);     /* muted, helper */
  --fg-quaternary:   var(--slate-400);     /* placeholder */
  --fg-on-brand:     #FFFFFF;
  --fg-on-accent:    #FFFFFF;
  --fg-link:         var(--azure-600);
  --fg-link-hover:   var(--azure-700);

  --border-subtle:   #E6EBF2;
  --border-default:  #D9E0EA;
  --border-strong:   #B8C2D1;
  --border-focus:    var(--azure-500);

  --brand-primary:   var(--navy-900);
  --brand-primary-hover: var(--navy-800);
  --brand-primary-active: var(--navy-950);
  --accent:          var(--azure-600);
  --accent-hover:    var(--azure-700);
  --accent-active:   #0A4AAD;
  --accent-soft:     var(--azure-50);

  /* ---------- TYPE FAMILIES ---------------------------------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE — base 16px ------------------------- */
  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    14px;   /* default UI body */
  --text-md:      15px;
  --text-lg:      17px;
  --text-xl:      20px;
  --text-2xl:     24px;
  --text-3xl:     30px;
  --text-4xl:     36px;
  --text-5xl:     48px;
  --text-6xl:     60px;
  --text-display: 72px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

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

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- SPACING — 4px base ----------------------------- */
  --space-0:   0;
  --space-px:  1px;
  --space-0_5: 2px;
  --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;

  /* ---------- RADII ------------------------------------------ */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   6px;     /* default UI */
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  14px;
  --radius-3xl:  20px;
  --radius-full: 9999px;

  /* ---------- SHADOWS — restrained, layered ------------------ */
  --shadow-xs:  0 1px 2px rgba(15, 30, 54, 0.04);
  --shadow-sm:  0 1px 2px rgba(15, 30, 54, 0.06), 0 1px 3px rgba(15, 30, 54, 0.04);
  --shadow-md:  0 2px 4px rgba(15, 30, 54, 0.06), 0 4px 8px rgba(15, 30, 54, 0.04);
  --shadow-lg:  0 4px 8px rgba(15, 30, 54, 0.06), 0 12px 24px rgba(15, 30, 54, 0.06);
  --shadow-xl:  0 8px 16px rgba(15, 30, 54, 0.08), 0 24px 48px rgba(15, 30, 54, 0.08);
  --shadow-focus: 0 0 0 3px rgba(38, 128, 235, 0.18);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(15, 30, 54, 0.06);

  /* ---------- MOTION ----------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;

  /* ---------- LAYOUT ----------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --sidebar-w:     248px;
  --topbar-h:      56px;

  /* ---------- Z ---------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-modal:   1000;
  --z-popover: 1100;
  --z-toast:   1200;
}

/* ===== DARK MODE ============================================ */
[data-theme="dark"] {
  --bg-canvas:    #0A1628;
  --bg-surface:   #0F1E36;
  --bg-surface-2: #16294A;
  --bg-surface-3: #1E3A5F;
  --bg-overlay:   rgba(0, 0, 0, 0.65);
  --bg-inverse:   #FFFFFF;

  --fg-primary:    #E8EDF5;
  --fg-secondary:  #B8C7DB;
  --fg-tertiary:   #8AA1C2;
  --fg-quaternary: #5C7BA8;
  --fg-on-brand:   #FFFFFF;
  --fg-on-accent:  #FFFFFF;
  --fg-link:       #5599F0;
  --fg-link-hover: #8AB6F5;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  --brand-primary:        #1E3A5F;
  --brand-primary-hover:  #2A4A75;
  --brand-primary-active: #16294A;
  --accent:               #2680EB;
  --accent-hover:         #5599F0;
  --accent-soft:          rgba(38,128,235,0.14);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 8px 16px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(85, 153, 240, 0.32);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Semantic type roles — apply directly via classes
   ============================================================ */
.sbw-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.sbw-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.sbw-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.sbw-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.sbw-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.sbw-h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.sbw-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--fg-tertiary);
}
.sbw-lead {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-regular);
  color: var(--fg-secondary);
}
.sbw-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}
.sbw-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}
.sbw-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}
.sbw-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-feature-settings: 'zero', 'ss01';
}

/* ============================================================
   Base reset & defaults
   ============================================================ */
.sbw-root {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
.sbw-root *, .sbw-root *::before, .sbw-root *::after {
  box-sizing: border-box;
}