/* ==========================================================================
   WP Social Proof — Design Tokens
   Source: design_handoff_wp_social_proof/design-preview/shared/tokens.css
   All values are final per design handoff. Colors use oklch for perceptual
   evenness. Do not merge with old values — this file replaces them entirely.
   ========================================================================== */

:root {
  /* ---------- Brand ---------- */
  --brand-ink:        oklch(27% 0.06 260);   /* deep navy — primary actions, active states */
  --brand-ink-hover:  oklch(32% 0.07 260);
  --brand-ink-press:  oklch(23% 0.05 260);
  --brand-coral:      oklch(72% 0.17 30);    /* warm coral — Pro chip, accent */
  --brand-coral-soft: oklch(94% 0.04 30);

  /* ---------- Neutrals (warm grey) ---------- */
  --bg:               oklch(99% 0.004 85);
  --bg-sunken:        oklch(97% 0.006 85);
  --bg-raised:        oklch(100% 0 0);
  --bg-hover:         oklch(96% 0.006 85);
  --bg-active:        oklch(93% 0.008 85);

  --fg1:              oklch(22% 0.015 260);
  --fg2:              oklch(44% 0.012 260);
  --fg3:              oklch(62% 0.010 260);
  --fg-inverse:       oklch(99% 0.004 85);

  --border:           oklch(92% 0.006 85);
  --border-strong:    oklch(86% 0.008 85);
  --border-focus:     oklch(55% 0.15 260);

  /* ---------- Semantic ---------- */
  --success:          oklch(62% 0.14 155);
  --success-soft:     oklch(95% 0.04 155);
  --warning:          oklch(76% 0.15 75);
  --warning-soft:     oklch(96% 0.05 75);
  --danger:           oklch(58% 0.19 25);
  --danger-soft:      oklch(95% 0.04 25);
  --info:             oklch(60% 0.14 240);
  --info-soft:        oklch(95% 0.04 240);

  /* ---------- Type families ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.04em;

  /* ---------- Spacing (4px grid) ---------- */
  --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;

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px oklch(20% 0.02 260 / 0.04);
  --shadow-sm: 0 1px 3px oklch(20% 0.02 260 / 0.06),
               0 1px 2px oklch(20% 0.02 260 / 0.04);
  --shadow-md: 0 4px 12px oklch(20% 0.02 260 / 0.08),
               0 2px 4px  oklch(20% 0.02 260 / 0.04);
  --shadow-lg: 0 12px 32px oklch(20% 0.02 260 / 0.12),
               0 4px 8px   oklch(20% 0.02 260 / 0.06);
  --shadow-focus: 0 0 0 3px oklch(55% 0.15 260 / 0.25);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}