/* =============================================================
   MANUVA DESIGN SYSTEM — Tokens
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-display: 'Outfit', 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 36px;
  --fs-h1:      24px;
  --fs-h2:      18px;
  --fs-h3:      15px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-label:   12px;
  --fs-badge:   11px;
  --fs-mono:    13px;

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

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  --ls-tight: -0.01em;
  --ls-caps:   0.08em;

  /* Brand */
  --brand-1:    #0B2847;
  --brand-2:    #1F4880;
  --brand-dim:  #DCE7F5;
  --brand-dark: #061831;

  /* Backgrounds */
  --bg-page:    #F5F7FA;
  --bg-sidebar: #FFFFFF;
  --bg-card:    #FFFFFF;
  --bg-card-2:  #F8FAFC;
  --bg-input:   #FFFFFF;
  --bg-overlay: rgba(15, 23, 42, 0.45);

  /* Ink */
  --ink-strong:   #0B1726;
  --ink-muted:    #4A5868;
  --ink-faint:    #8794A6;
  --ink-on-brand: #FFFFFF;

  /* Strokes */
  --stroke:        #E3E8EF;
  --stroke-card:   #DAE0EA;
  --stroke-strong: #C7CFDB;
  --stroke-focus:  var(--brand-1);

  /* Semantic */
  --ok:         #117A3D;
  --ok-dim:     #DCF1E3;
  --danger:     #B42318;
  --danger-dim: #FCE7E6;
  --warning:    #B45309;
  --warning-dim: #FDF1DA;

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   9px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Spacing */
  --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;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(11, 40, 71, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 1);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

[data-theme="dark"], :root.dark {
  --brand-1:    #3D7BD9;
  --brand-2:    #6FA0E8;
  --brand-dim:  #1E3A66;
  --brand-dark: #0B2847;

  --bg-page:    #0A0F17;
  --bg-sidebar: #0E1623;
  --bg-card:    #141C2B;
  --bg-card-2:  #1A2435;
  --bg-input:   #0F1825;

  --ink-strong: #EAF0F7;
  --ink-muted:  #97A4B8;
  --ink-faint:  #5A6678;

  --stroke:        #1E2839;
  --stroke-card:   #232E42;
  --stroke-strong: #2E3B52;

  --ok:         #34C77B;
  --ok-dim:     #16331E;
  --danger:     #E5484D;
  --danger-dim: #3A1417;
  --warning:    #F5A524;
  --warning-dim: #3A2410;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(61, 123, 217, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html, body {
  background: var(--bg-page);
  color: var(--ink-strong);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}