/* ==========================================================================
   Sabang — design tokens
   Shared variable sheet. Consumed by src/docs/index.html; the marketing pages
   use the Tailwind CDN config, so keep the brand values below in sync with the
   `tailwind.config` block in each page (primary/secondary/accent/dark).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---- palette: jade (brand) ---- */
  --jade-50: #ecfdf5;
  --jade-100: #d1fae5;
  --jade-200: #a7f3d0;
  --jade-300: #6ee7b7;
  --jade-400: #34d399;
  --jade-500: #10b981;
  --jade-600: #059669;
  --jade-700: #047857;
  --jade-800: #065f46;
  --jade-900: #064e3b;
  --jade-950: #032b21;

  /* ---- palette: sand (notes, soft surfaces) ---- */
  --sand-50: #fdfaf3;
  --sand-100: #f6edda;
  --sand-200: #ecdcbb;
  --sand-700: #7c6224;

  /* ---- palette: stone (neutrals) ---- */
  --stone-50: #f8fafc;
  --stone-100: #f1f5f9;
  --stone-200: #e2e8f0;
  --stone-300: #cbd5e1;
  --stone-400: #94a3b8;
  --stone-500: #64748b;
  --stone-600: #475569;
  --stone-700: #334155;
  --stone-800: #1e293b;
  --stone-900: #0f172a;

  /* ---- semantic ---- */
  --color-bg: #ffffff;
  --color-surface: var(--stone-50);
  --color-border: var(--stone-200);
  --color-text: var(--stone-800);
  --color-text-muted: var(--stone-600);
  --color-text-faint: var(--stone-400);
  --color-primary: var(--jade-600);
  --color-primary-hover: var(--jade-700);
  --color-primary-soft: var(--jade-100);

  /* ---- typography ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-display: 2.75rem;
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.125rem;
  --text-body-lg: 1.0625rem;
  --text-body: 0.9375rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  --leading-tight: 1.25;
  --leading-normal: 1.7;

  /* ---- radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 34px rgba(15, 23, 42, 0.16);

  /* ---- motion ---- */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}