/* ============================================
   Playbook Design Tokens
   ============================================
   Auto-generated from _brand.yml
   Import this file into any web project to get
   the full Playbook visual system.

   Usage:
     color: var(--pb-color-primary);
     font-family: var(--pb-font-heading);
     font-size: var(--pb-text-h2);
   ============================================ */

:root {
  /* ─── Colors: Primary ─────────────────── */
  --pb-color-primary: #1B2838;
  --pb-color-primary-light: #2A3F56;
  --pb-color-primary-dark: #0F1923;

  /* ─── Colors: Secondary ───────────────── */
  --pb-color-secondary: #00D4AA;
  --pb-color-secondary-light: #33DDBB;
  --pb-color-secondary-dark: #00A888;

  /* ─── Colors: Accent ──────────────────── */
  --pb-color-accent: #FF6B35;
  --pb-color-accent-light: #FF8A5C;
  --pb-color-accent-dark: #E55A2B;

  /* ─── Colors: Neutrals ────────────────── */
  --pb-color-neutral-900: #1A1A2E;
  --pb-color-neutral-700: #3D3D5C;
  --pb-color-neutral-500: #6B6B8A;
  --pb-color-neutral-300: #A8A8C0;
  --pb-color-neutral-100: #E8E8F0;
  --pb-color-neutral-50: #F5F5FA;
  --pb-color-white: #FFFFFF;
  --pb-color-black: #111111;

  /* ─── Colors: Semantic ────────────────── */
  --pb-color-success: #00C853;
  --pb-color-warning: #FFB300;
  --pb-color-danger: #FF3D00;
  --pb-color-info: #2979FF;

  /* ─── Colors: Functional mappings ─────── */
  --pb-bg: var(--pb-color-neutral-50);
  --pb-surface: var(--pb-color-white);
  --pb-text: var(--pb-color-neutral-900);
  --pb-text-secondary: var(--pb-color-neutral-700);
  --pb-text-muted: var(--pb-color-neutral-500);
  --pb-link: var(--pb-color-primary-light);
  --pb-link-hover: var(--pb-color-primary);
  --pb-border: var(--pb-color-neutral-500);
  --pb-divider: var(--pb-color-neutral-100);
  --pb-cta-bg: var(--pb-color-accent);
  --pb-cta-text: var(--pb-color-primary);
  --pb-cta-secondary-bg: var(--pb-color-secondary);
  --pb-cta-secondary-text: var(--pb-color-primary);
  --pb-helpline-banner-bg: var(--pb-color-primary);
  --pb-helpline-banner-text: var(--pb-color-white);

  /* ─── Typography: Families ────────────── */
  --pb-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --pb-font-body: 'Source Sans 3', system-ui, sans-serif;
  --pb-font-mono: 'Source Code Pro', monospace;

  /* ─── Typography: Scale ───────────────── */
  --pb-text-display: 3rem;      /* 48px */
  --pb-text-h1: 2.5rem;         /* 40px */
  --pb-text-h2: 2rem;           /* 32px */
  --pb-text-h3: 1.5rem;         /* 24px */
  --pb-text-h4: 1.25rem;        /* 20px */
  --pb-text-body-lg: 1.125rem;  /* 18px */
  --pb-text-body: 1rem;         /* 16px */
  --pb-text-small: 0.875rem;    /* 14px */
  --pb-text-caption: 0.75rem;   /* 12px */

  /* ─── Typography: Weights ─────────────── */
  --pb-weight-light: 300;
  --pb-weight-regular: 400;
  --pb-weight-medium: 500;
  --pb-weight-semibold: 600;
  --pb-weight-bold: 700;
  --pb-weight-extrabold: 800;
  --pb-weight-black: 900;

  /* ─── Typography: Letter Spacing ──────── */
  --pb-tracking-tight: -0.02em;
  --pb-tracking-normal: 0;
  --pb-tracking-wide: 0.05em;
  --pb-tracking-wider: 0.1em;

  /* ─── Typography: Line Heights ────────── */
  --pb-leading-heading: 1.2;
  --pb-leading-body: 1.6;
  --pb-leading-tight: 1.3;

  /* ─── Spacing ─────────────────────────── */
  --pb-space-1: 0.25rem;   /* 4px */
  --pb-space-2: 0.5rem;    /* 8px */
  --pb-space-3: 0.75rem;   /* 12px */
  --pb-space-4: 1rem;      /* 16px */
  --pb-space-6: 1.5rem;    /* 24px */
  --pb-space-8: 2rem;      /* 32px */
  --pb-space-12: 3rem;     /* 48px */
  --pb-space-16: 4rem;     /* 64px */
  --pb-space-24: 6rem;     /* 96px */

  /* ─── Borders ─────────────────────────── */
  --pb-radius-sm: 4px;
  --pb-radius-md: 8px;
  --pb-radius-lg: 12px;
  --pb-radius-full: 9999px;
  --pb-border-width: 1px;

  /* ─── Shadows ─────────────────────────── */
  --pb-shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.06);
  --pb-shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);
  --pb-shadow-lg: 0 8px 24px rgba(26, 26, 46, 0.12);

  /* ─── Touch targets ───────────────────── */
  --pb-touch-min: 44px;
  --pb-touch-critical: 48px;

  /* ─── Breakpoints (reference only) ────── */
  /* --pb-bp-mobile: 768px;  */
  /* --pb-bp-tablet: 1024px; */
  /* --pb-bp-desktop: 1280px; */

  /* ─── Transitions ─────────────────────── */
  --pb-transition-fast: 150ms ease;
  --pb-transition-base: 250ms ease;
}

/* ─── Dark mode adaptation ──────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --pb-bg: var(--pb-color-neutral-900);
    --pb-surface: var(--pb-color-neutral-700);
    --pb-text: var(--pb-color-neutral-50);
    --pb-text-secondary: var(--pb-color-neutral-100);
    --pb-text-muted: var(--pb-color-neutral-300);
    --pb-border: var(--pb-color-neutral-500);
    --pb-divider: var(--pb-color-neutral-700);
  }
}