/* =========================================================================
 * sb-tokens.css — Design tokens for the Stablerating frontend (UX-001, DEL-002)
 * Single source of truth for colour, typography, spacing, radii, shadows.
 * Everything downstream references var(--sb-*). Swap values here to re-skin.
 * Equestrian, trustworthy, clean: pine-green primary, warm sand, amber accent
 * for quality signals (stars / certification / top badges).
 * ========================================================================= */

:root {
  /* ---- Brand palette ---- */
  --sb-green-900: #172a20;
  --sb-green-800: #1f3a2c;
  --sb-green-700: #2f5741; /* primary */
  --sb-green-600: #3a6b51;
  --sb-green-500: #4a8163;
  --sb-green-400: #6ba184;
  --sb-green-100: #e4efe8;
  --sb-green-050: #f1f7f3;

  --sb-sand-500: #d8c6a3;
  --sb-sand-300: #e8ddc9;
  --sb-sand-200: #f0e8db;
  --sb-sand-100: #f7f2e9;

  --sb-amber-600: #b9791a;
  --sb-amber-500: #d99a2b; /* stars, certified, top badge accent */
  --sb-amber-400: #eab54f;
  --sb-amber-100: #fbeecd;

  /* ---- Ink / neutrals ---- */
  --sb-ink-900: #16201b;
  --sb-ink-700: #2b352f; /* body text */
  --sb-ink-500: #55605a; /* secondary text */
  --sb-ink-400: #78837d; /* muted / captions */
  --sb-line: #dfe4e0;    /* hairlines / borders */
  --sb-surface: #ffffff;
  --sb-surface-2: #f6f8f6; /* subtle section background */
  --sb-surface-3: #eef2ef;

  /* ---- Status colours ---- */
  --sb-success: #2f7d54;
  --sb-success-bg: #e6f2ea;
  --sb-warn: #b9791a;
  --sb-warn-bg: #fbeecd;
  --sb-error: #c0392b;
  --sb-error-bg: #fbe7e4;
  --sb-info: #2f5741;
  --sb-info-bg: #e4efe8;

  /* ---- Semantic aliases (use these in components) ---- */
  --sb-primary: var(--sb-green-700);
  --sb-primary-hover: var(--sb-green-800);
  --sb-primary-contrast: #ffffff;
  --sb-accent: var(--sb-amber-500);
  --sb-text: var(--sb-ink-700);
  --sb-text-muted: var(--sb-ink-500);
  --sb-bg: var(--sb-surface);
  --sb-bg-alt: var(--sb-surface-2);
  --sb-border: var(--sb-line);

  /* ---- Typography ---- */
  --sb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --sb-font-head: "Georgia", "Times New Roman", var(--sb-font-sans);

  --sb-fs-xs: 0.75rem;   /* 12 */
  --sb-fs-sm: 0.875rem;  /* 14 */
  --sb-fs-base: 1rem;    /* 16 */
  --sb-fs-md: 1.125rem;  /* 18 */
  --sb-fs-lg: 1.375rem;  /* 22 */
  --sb-fs-xl: 1.75rem;   /* 28 */
  --sb-fs-2xl: 2.25rem;  /* 36 */
  --sb-fs-3xl: 3rem;     /* 48 */

  --sb-lh-tight: 1.2;
  --sb-lh-snug: 1.35;
  --sb-lh-base: 1.6;

  --sb-fw-normal: 400;
  --sb-fw-medium: 500;
  --sb-fw-semibold: 600;
  --sb-fw-bold: 700;

  /* ---- Spacing scale (4px base) ---- */
  --sb-sp-1: 0.25rem;
  --sb-sp-2: 0.5rem;
  --sb-sp-3: 0.75rem;
  --sb-sp-4: 1rem;
  --sb-sp-5: 1.5rem;
  --sb-sp-6: 2rem;
  --sb-sp-7: 3rem;
  --sb-sp-8: 4rem;
  --sb-sp-9: 6rem;

  /* ---- Radii ---- */
  --sb-radius-sm: 6px;
  --sb-radius: 10px;
  --sb-radius-lg: 16px;
  --sb-radius-pill: 999px;

  /* ---- Shadows ---- */
  --sb-shadow-sm: 0 1px 2px rgba(22, 32, 27, 0.06),
    0 1px 3px rgba(22, 32, 27, 0.08);
  --sb-shadow: 0 2px 8px rgba(22, 32, 27, 0.08),
    0 8px 24px rgba(22, 32, 27, 0.06);
  --sb-shadow-lg: 0 12px 40px rgba(22, 32, 27, 0.14);

  /* ---- Layout ---- */
  --sb-container: 1180px;
  --sb-container-narrow: 760px;
  --sb-header-h: 68px;

  /* ---- Motion ---- */
  --sb-transition: 160ms ease;

  /* ---- Focus ring (WCAG 2.2 — visible, high contrast) ---- */
  --sb-focus: 0 0 0 3px rgba(47, 87, 65, 0.35), 0 0 0 1px var(--sb-green-700);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-transition: 0ms;
  }
}