/* ============================================================
   Wisbid — Design Tokens
   Editorial restraint × operational specificity. Light theme.
   Anchored on Wisbid Navy #0B1F3B.
   Always import this at the top of any Wisbid file.
   ============================================================ */

/* ---- Fonts (Manrope trial) ---- */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand primitives (locked) ---------- */
  --wb-primary:        #0B1F3B; /* Wisbid Navy   */
  --wb-primary-light:  #16457A; /* Wisbid Blue   */
  --wb-primary-200:    #C5D0DE; /* Wisbid Slate  */
  --wb-primary-50:     #ECF0F4; /* Wisbid Mist   */

  /* ---------- Navy ramp ---------- */
  --wb-navy-950: #07142A;
  --wb-navy-900: #0B1F3B;
  --wb-navy-800: #102E55;
  --wb-navy-700: #16457A;
  --wb-navy-600: #1F5A99;
  --wb-navy-500: #3B78B8;
  --wb-navy-400: #6F9BCB;
  --wb-navy-300: #9DBADC;
  --wb-navy-200: #C5D0DE;
  --wb-navy-100: #DEE5ED;
  --wb-navy-50:  #ECF0F4;
  --wb-navy-25:  #F6F8FA;

  /* ---------- Ink (warm-leaning neutrals) ---------- */
  --wb-ink-900: #0E1116;
  --wb-ink-700: #1F2937;
  --wb-ink-600: #374151;
  --wb-ink-500: #4B5563;
  --wb-ink-400: #6B7280;
  --wb-ink-300: #9AA3AF;
  --wb-ink-200: #D1D5DB;
  --wb-ink-150: #E2E5EA;
  --wb-ink-100: #EEF0F2;
  --wb-ink-50:  #F7F8FA;
  --wb-ink-0:   #FFFFFF;

  /* ---------- Semantic states ---------- */
  --wb-success-700: #115E3A;
  --wb-success-500: #1A8754;
  --wb-success-100: #DCF1E6;
  --wb-success-50:  #EEF8F2;

  --wb-warning-700: #8A4B00;
  --wb-warning-500: #C9700C;
  --wb-warning-100: #FCE7CC;
  --wb-warning-50:  #FDF3E5;

  --wb-error-700:   #921F2C;
  --wb-error-500:   #C5283D;
  --wb-error-100:   #F8D7DC;
  --wb-error-50:    #FCEBEE;

  --wb-info-700: #16457A;
  --wb-info-500: #3B78B8;
  --wb-info-100: #DEE9F4;
  --wb-info-50:  #EEF3F9;

  --wb-focus-ring: #3B78B8;

  /* Accent — used <3% of pixel area. SLA breach, single hero highlight. */
  --wb-accent: #E8A33D;

  /* ---------- Surfaces ---------- */
  --wb-surface-page:       var(--wb-ink-0);
  --wb-surface-tint:       var(--wb-navy-25);
  --wb-surface-mist:       var(--wb-navy-50);
  --wb-surface-deep:       var(--wb-navy-900);
  --wb-surface-card:       var(--wb-ink-0);
  --wb-surface-card-muted: var(--wb-ink-50);
  --wb-overlay:            rgba(11, 31, 59, 0.72);

  --wb-border:         var(--wb-ink-150);
  --wb-border-strong:  var(--wb-ink-200);
  --wb-border-subtle:  var(--wb-navy-100);
  --wb-border-emphasis: var(--wb-navy-700);

  --wb-text-primary:   var(--wb-ink-900);
  --wb-text-secondary: var(--wb-ink-600);
  --wb-text-muted:     var(--wb-ink-400);
  --wb-text-on-navy:   var(--wb-ink-0);
  --wb-text-link:      var(--wb-navy-700);

  /* ---------- Type families ---------- */
  --wb-font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wb-font-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wb-font-mono:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Spacing (4px base) ---------- */
  --wb-space-1:  4px;
  --wb-space-2:  8px;
  --wb-space-3:  12px;
  --wb-space-4:  16px;
  --wb-space-5:  20px;
  --wb-space-6:  24px;
  --wb-space-8:  32px;
  --wb-space-10: 40px;
  --wb-space-12: 48px;
  --wb-space-16: 64px;
  --wb-space-20: 80px;
  --wb-space-24: 96px;
  --wb-space-32: 128px;

  /* ---------- Layout ---------- */
  --wb-container-max:   1280px;
  --wb-container-prose: 720px;
  --wb-gutter:          24px;

  /* ---------- Radii ---------- */
  --wb-radius-xs: 4px;
  --wb-radius-sm: 6px;
  --wb-radius-md: 8px;
  --wb-radius-lg: 12px;
  --wb-radius-xl: 16px;
  --wb-radius-pill: 999px;

  /* ---------- Elevation (hairline) ---------- */
  --wb-shadow-xs: 0 1px 1px rgba(11,31,59,.04);
  --wb-shadow-sm: 0 1px 2px rgba(11,31,59,.06), 0 1px 3px rgba(11,31,59,.04);
  --wb-shadow-md: 0 4px 8px -2px rgba(11,31,59,.08), 0 2px 4px -2px rgba(11,31,59,.06);
  --wb-shadow-lg: 0 12px 24px -8px rgba(11,31,59,.12), 0 4px 8px -2px rgba(11,31,59,.06);
  --wb-shadow-xl: 0 24px 40px -16px rgba(11,31,59,.18), 0 8px 16px -4px rgba(11,31,59,.08);

  /* ---------- Motion ---------- */
  --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wb-dur-instant: 80ms;
  --wb-dur-fast: 150ms;
  --wb-dur-base: 200ms;
  --wb-dur-slow: 300ms;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-feature-settings: 'cv11' 1, 'ss01' 1, 'ss03' 1, 'cv02' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--wb-font-sans);
  font-size: 16px;
  line-height: 1.625;
  color: var(--wb-text-primary);
  background: var(--wb-surface-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wb-font-display);
  color: var(--wb-navy-900);
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p { margin: 0; }
a { color: var(--wb-text-link); text-decoration: none; transition: color var(--wb-dur-fast); }
a:hover { color: var(--wb-navy-800); }

::selection { background: var(--wb-navy-100); color: var(--wb-navy-900); }

/* Tabular figures helper */
.wb-tabular { font-variant-numeric: tabular-nums slashed-zero; }

/* ============================================================
   Type scale (use as classes; matches Opus spec)
   ============================================================ */
.wb-display-2xl { font: 600 72px/80px var(--wb-font-display); letter-spacing: -0.04em;  font-family: var(--wb-font-display); }
.wb-display-xl  { font: 600 60px/68px var(--wb-font-display); letter-spacing: -0.035em; }
.wb-display-lg  { font: 600 48px/56px var(--wb-font-display); letter-spacing: -0.03em; }
.wb-display-md  { font: 600 40px/48px var(--wb-font-display); letter-spacing: -0.025em; }
.wb-h1 { font: 600 36px/44px var(--wb-font-display); letter-spacing: -0.02em; }
.wb-h2 { font: 600 28px/36px var(--wb-font-display); letter-spacing: -0.015em; }
.wb-h3 { font: 600 22px/30px var(--wb-font-sans); letter-spacing: -0.01em; }
.wb-h4 { font: 600 18px/26px var(--wb-font-sans); letter-spacing: -0.005em; }
.wb-h5 { font: 600 16px/24px var(--wb-font-sans); }

.wb-body-lg { font: 400 18px/30px var(--wb-font-sans); }
.wb-body    { font: 400 16px/26px var(--wb-font-sans); }
.wb-body-sm { font: 400 14px/22px var(--wb-font-sans); }
.wb-caption { font: 500 13px/20px var(--wb-font-sans); letter-spacing: 0.005em; }

.wb-eyebrow {
  font: 600 12px/16px var(--wb-font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wb-navy-700);
  margin: 0 0 16px;
}

.wb-mono    { font: 500 13px/20px var(--wb-font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.wb-mono-sm { font: 500 12px/18px var(--wb-font-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}