/* ============================================================================
 * Design Tokens — :root
 * Single source of truth for color, spacing, typography, radius, shadows,
 * z-index, motion, and breakpoints. All other CSS references these.
 * ========================================================================== */

:root {
  /* ── Color · Neutrals ───────────────────────────────────────────────────── */
  --wb-color-white: #ffffff;
  --wb-color-ink: #0b0f17;          /* primary text / headings */
  --wb-color-ink-2: #1a2030;        /* secondary heading shade */
  --wb-color-text: #2b3140;         /* body text */
  --wb-color-text-muted: #5a6273;   /* captions, helper text */
  --wb-color-text-soft: #8a92a6;    /* subtle text, placeholders */

  --wb-color-bg: #ffffff;
  --wb-color-bg-soft: #f8f9fb;      /* alternate sections */
  --wb-color-bg-muted: #f1f3f7;     /* cards, surfaces */
  --wb-color-surface: #ffffff;

  --wb-color-border: #e5e7ee;
  --wb-color-border-soft: #eff1f5;
  --wb-color-border-strong: #cdd2dc;

  /* ── Color · Brand ──────────────────────────────────────────────────────── */
  --wb-color-brand: #2563eb;
  --wb-color-brand-hover: #1d4ed8;
  --wb-color-brand-soft: #eff4ff;
  --wb-color-brand-ink: #1e3a8a;

  /* ── Color · Semantic ───────────────────────────────────────────────────── */
  --wb-color-success: #16a34a;
  --wb-color-warning: #d97706;
  --wb-color-danger:  #dc2626;
  --wb-color-info:    #0284c7;

  /* ── Color · Focus ──────────────────────────────────────────────────────── */
  --wb-color-focus-ring: rgba(37, 99, 235, 0.35);

  /* ── Spacing · 4px base, T-shirt scale ─────────────────────────────────── */
  --wb-space-0:  0;
  --wb-space-1:  0.25rem;   /*  4px */
  --wb-space-2:  0.5rem;    /*  8px */
  --wb-space-3:  0.75rem;   /* 12px */
  --wb-space-4:  1rem;      /* 16px */
  --wb-space-5:  1.5rem;    /* 24px */
  --wb-space-6:  2rem;      /* 32px */
  --wb-space-7:  2.5rem;    /* 40px */
  --wb-space-8:  3rem;      /* 48px */
  --wb-space-9:  4rem;      /* 64px */
  --wb-space-10: 5rem;      /* 80px */
  --wb-space-11: 6rem;      /* 96px */
  --wb-space-12: 8rem;      /* 128px */

  /* Section vertical rhythm — fluid via clamp() */
  --wb-section-y: clamp(3.5rem, 6vw + 1rem, 7rem);
  --wb-section-y-sm: clamp(2.5rem, 4vw + 1rem, 5rem);

  /* ── Typography · families ─────────────────────────────────────────────── */
  --wb-font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial,
    sans-serif;
  --wb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --wb-font-display: var(--wb-font-sans);

  /* ── Typography · scale (modular, fluid via clamp at heading level) ────── */
  --wb-text-xs:  0.75rem;   /* 12px */
  --wb-text-sm:  0.875rem;  /* 14px */
  --wb-text-base: 1rem;     /* 16px */
  --wb-text-lg:  1.125rem;  /* 18px */
  --wb-text-xl:  1.25rem;   /* 20px */
  --wb-text-2xl: 1.5rem;    /* 24px */
  --wb-text-3xl: 1.875rem;  /* 30px */
  --wb-text-4xl: 2.25rem;   /* 36px */
  --wb-text-5xl: 3rem;      /* 48px */
  --wb-text-6xl: 3.75rem;   /* 60px */
  --wb-text-7xl: 4.5rem;    /* 72px */

  /* Fluid heading sizes — mobile→desktop via single clamp() per heading */
  --wb-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
  --wb-h2: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --wb-h3: clamp(1.375rem, 2vw + 0.5rem, 2rem);
  --wb-h4: clamp(1.125rem, 1vw + 0.625rem, 1.5rem);
  --wb-h5: 1.125rem;
  --wb-h6: 1rem;

  /* ── Typography · weight & line-height ─────────────────────────────────── */
  --wb-fw-light: 300;
  --wb-fw-regular: 400;
  --wb-fw-medium: 500;
  --wb-fw-semibold: 600;
  --wb-fw-bold: 700;
  --wb-fw-extrabold: 800;

  --wb-lh-tight: 1.15;
  --wb-lh-snug: 1.3;
  --wb-lh-normal: 1.55;
  --wb-lh-relaxed: 1.7;

  --wb-ls-tight: -0.02em;
  --wb-ls-normal: 0;
  --wb-ls-wide: 0.04em;

  /* ── Layout · containers ───────────────────────────────────────────────── */
  --wb-container-sm: 640px;
  --wb-container-md: 768px;
  --wb-container-lg: 1024px;
  --wb-container-xl: 1200px;
  --wb-container-2xl: 1320px;
  --wb-container-default: var(--wb-container-2xl);
  --wb-container-padding: clamp(1rem, 3vw, 2rem);

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --wb-radius-xs: 4px;
  --wb-radius-sm: 6px;
  --wb-radius-md: 10px;
  --wb-radius-lg: 14px;
  --wb-radius-xl: 20px;
  --wb-radius-2xl: 28px;
  --wb-radius-full: 9999px;

  /* ── Shadows · subtle, premium ─────────────────────────────────────────── */
  --wb-shadow-xs: 0 1px 2px rgba(11, 15, 23, 0.04);
  --wb-shadow-sm: 0 1px 3px rgba(11, 15, 23, 0.06), 0 1px 2px rgba(11, 15, 23, 0.04);
  --wb-shadow-md: 0 4px 8px rgba(11, 15, 23, 0.06), 0 2px 4px rgba(11, 15, 23, 0.04);
  --wb-shadow-lg: 0 12px 24px rgba(11, 15, 23, 0.08), 0 4px 8px rgba(11, 15, 23, 0.04);
  --wb-shadow-xl: 0 24px 48px rgba(11, 15, 23, 0.10), 0 8px 16px rgba(11, 15, 23, 0.05);

  /* ── Z-index scale ─────────────────────────────────────────────────────── */
  --wb-z-base: 1;
  --wb-z-dropdown: 100;
  --wb-z-sticky: 200;
  --wb-z-header: 300;
  --wb-z-overlay: 800;
  --wb-z-modal: 900;
  --wb-z-toast: 1000;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --wb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wb-duration-fast: 120ms;
  --wb-duration-base: 200ms;
  --wb-duration-slow: 320ms;

  /* ── Misc ───────────────────────────────────────────────────────────────── */
  --wb-border-width: 1px;
  --wb-focus-width: 2px;
}

/* Breakpoints are referenced by media queries; documented here for clarity:
 *   sm:   ≥ 640px
 *   md:   ≥ 768px
 *   lg:   ≥ 1024px
 *   xl:   ≥ 1280px
 *   2xl:  ≥ 1536px
 * Use mobile-first @media (min-width: …) queries throughout the codebase.
 */