/* ==========================================================================
   Workbridge — design tokens
   The single source of truth for the marketing site. Every value below is
   contrast-audited by scripts/contrast.py (39/39 pairings pass WCAG AA).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- palette */
  /* Ink — text, dark surfaces. The "signed contract" black. */
  --wb-ink: #141413;
  --wb-ink-700: #3a3a37;
  --wb-ink-500: #57564f;

  /* Warm neutrals — paper, not screen. */
  --wb-paper: #faf9f5;
  --wb-linen: #e8e6dc;
  --wb-stone: #b0aea5;
  --wb-stone-500: #8b8980;
  --wb-stone-600: #6f6d64;

  /* Copper — primary. Terracotta/cork. Money, action, the paid map. */
  --wb-copper-100: #f7e4dc;
  --wb-copper-300: #eab19a;
  --wb-copper-500: #d97757;
  --wb-copper-600: #c05c3b;
  --wb-copper-700: #9c4527;
  --wb-copper-800: #76331c;

  /* Harbor — secondary. Measurement, scoring, data. Never the CTA. */
  --wb-harbor-100: #dfeaf5;
  --wb-harbor-300: #a5c4e2;
  --wb-harbor-500: #6a9bcc;
  --wb-harbor-600: #3f7bb3;
  --wb-harbor-700: #2b5c89;
  --wb-harbor-800: #1f4364;

  /* Moss — recovered hours, shipped work, "sealed". */
  --wb-moss-100: #e6ebdc;
  --wb-moss-300: #b3c096;
  --wb-moss-500: #788c5d;
  --wb-moss-600: #5f7247;
  --wb-moss-700: #485636;

  /* Amber / Brick — semantic only. Never decorative. */
  --wb-amber-100: #f7e8cd;
  --wb-amber-500: #c08a2e;
  --wb-amber-600: #9a6b18;
  --wb-amber-700: #7a5412;
  --wb-brick-100: #f7dedb;
  --wb-brick-500: #c4463a;
  --wb-brick-600: #a5342a;
  --wb-brick-700: #83271f;

  /* ------------------------------------------------------ roles: light */
  --wb-bg: var(--wb-paper);
  --wb-bg-sunken: var(--wb-linen);
  --wb-surface: #ffffff;
  --wb-surface-raised: var(--wb-paper);
  --wb-surface-dark: var(--wb-ink);

  --wb-text: var(--wb-ink);
  --wb-text-muted: var(--wb-ink-500);
  --wb-text-subtle: var(--wb-stone-600);
  --wb-text-invert: var(--wb-paper);
  --wb-text-invert-muted: var(--wb-stone);

  /* Action. Copper-700 is the only fill allowed to carry paper text. */
  --wb-action: var(--wb-copper-700);
  --wb-action-hover: var(--wb-copper-800);
  --wb-action-text: var(--wb-paper);
  --wb-link: var(--wb-copper-700);

  /* Accent is a graphic colour: rules, marks, fills behind ink text.
     It is NOT a text colour on paper (2.96:1) and never a button fill. */
  --wb-accent: var(--wb-copper-500);
  --wb-accent-soft: var(--wb-copper-100);

  --wb-border: var(--wb-linen);
  --wb-border-control: var(--wb-stone-600);
  --wb-divider: var(--wb-stone-500);
  --wb-focus: var(--wb-copper-700);
  --wb-focus-invert: var(--wb-copper-300);

  /* --------------------------------------------------------- semantic */
  --wb-success: var(--wb-moss-600);
  --wb-success-surface: var(--wb-moss-100);
  --wb-success-text: var(--wb-moss-700);
  --wb-warn: var(--wb-amber-600);
  --wb-warn-surface: var(--wb-amber-100);
  --wb-warn-text: var(--wb-amber-700);
  --wb-danger: var(--wb-brick-600);
  --wb-danger-surface: var(--wb-brick-100);
  --wb-danger-text: var(--wb-brick-700);
  --wb-info: var(--wb-harbor-600);
  --wb-info-surface: var(--wb-harbor-100);
  --wb-info-text: var(--wb-harbor-700);

  /* ------------------------------------------------- offer ladder ink
     Visual hierarchy encodes the sales rule: the free tier is always the
     quietest thing on the page, the paid map is the loudest. */
  --wb-free15-surface: var(--wb-linen);
  --wb-free15-border: var(--wb-stone-600);
  --wb-free15-text: var(--wb-ink);
  --wb-cork-surface: var(--wb-copper-100);
  --wb-cork-border: var(--wb-copper-700);
  --wb-cork-text: var(--wb-copper-800);
  --wb-concierge-surface: var(--wb-ink);
  --wb-concierge-border: var(--wb-ink);
  --wb-concierge-text: var(--wb-paper);

  /* ----------------------------------------------------------- type */
  --wb-font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --wb-font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --wb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wb-text-display-1: 3.75rem;  /* 60 */
  --wb-text-display-2: 3rem;     /* 48 */
  --wb-text-h1: 2.25rem;         /* 36 */
  --wb-text-h2: 1.875rem;        /* 30 */
  --wb-text-h3: 1.5rem;          /* 24 */
  --wb-text-h4: 1.25rem;         /* 20 */
  --wb-text-lg: 1.125rem;        /* 18 */
  --wb-text-base: 1rem;          /* 16 */
  --wb-text-sm: 0.875rem;        /* 14 */
  --wb-text-xs: 0.8125rem;       /* 13 */
  --wb-text-label: 0.875rem;     /* 14 - Poppins UI labels, sentence case */
  --wb-text-annotation: 0.75rem;    /* 12 */

  --wb-leading-tight: 1.05;
  --wb-leading-snug: 1.2;
  --wb-leading-normal: 1.45;
  --wb-leading-relaxed: 1.65;
  --wb-tracking-tight: -0.02em;
  --wb-tracking-normal: 0;
  --wb-tracking-wide: 0.08em;
  --wb-tracking-annotation: 0.14em;
  --wb-measure: 68ch; /* max line length for body copy */

  /* --------------------------------------------------------- spacing */
  --wb-space-1: 0.25rem;
  --wb-space-2: 0.5rem;
  --wb-space-3: 0.75rem;
  --wb-space-4: 1rem;
  --wb-space-5: 1.5rem;
  --wb-space-6: 2rem;
  --wb-space-7: 3rem;
  --wb-space-8: 4rem;
  --wb-space-9: 6rem;
  --wb-space-10: 8rem;

  /* ------------------------------------------------- shape & surface
     Small radii and hairlines, not pills and glows. Drawn, not rendered. */
  --wb-radius-sm: 3px;
  --wb-radius-md: 5px;
  --wb-radius-lg: 8px;
  --wb-radius-pill: 999px;
  --wb-hairline: 1px solid var(--wb-border);
  --wb-rule: 1px solid var(--wb-divider);
  --wb-shadow-1: 0 1px 2px rgba(20, 20, 19, 0.06);
  --wb-shadow-2: 0 2px 6px rgba(20, 20, 19, 0.07), 0 1px 2px rgba(20, 20, 19, 0.05);
  --wb-shadow-lift: 0 6px 18px rgba(20, 20, 19, 0.09);

  /* --------------------------------------------------------- motion
     Calm: short, linear-ish, no overshoot. */
  --wb-motion-fast: 120ms;
  --wb-motion-base: 200ms;
  --wb-ease: cubic-bezier(0.2, 0, 0.3, 1);
}

/* Reverse context: apply to any dark section. Role tokens flip, palette
   does not, so components need no dark-mode variants of their own. */
.wb-reverse {
  --wb-bg: var(--wb-ink);
  --wb-bg-sunken: #0d0d0c;
  --wb-surface: #1d1d1b;
  --wb-surface-raised: #24241f;
  --wb-text: var(--wb-paper);
  --wb-text-muted: var(--wb-stone);
  --wb-text-subtle: var(--wb-stone-500);
  --wb-text-invert: var(--wb-ink);
  --wb-text-invert-muted: var(--wb-ink-500);
  --wb-action: var(--wb-copper-500);
  --wb-action-hover: var(--wb-copper-300);
  --wb-action-text: var(--wb-ink);
  --wb-link: var(--wb-copper-300);
  --wb-border: #33332f;
  --wb-border-control: var(--wb-stone-500);
  --wb-divider: #3f3f3a;
  --wb-focus: var(--wb-copper-300);
  --wb-success-text: var(--wb-moss-300);
  --wb-warn-text: #e8c479;
  --wb-danger-text: #eda49b;
  --wb-info-text: var(--wb-harbor-300);
  --wb-free15-surface: transparent;
  --wb-free15-border: var(--wb-stone-500);
  --wb-free15-text: var(--wb-paper);
  --wb-cork-surface: var(--wb-copper-500);
  --wb-cork-border: var(--wb-copper-500);
  --wb-cork-text: var(--wb-ink);
  --wb-concierge-surface: transparent;
  --wb-concierge-border: var(--wb-stone);
  --wb-concierge-text: var(--wb-paper);
}