/*
 * WiseMembers Design System — Tokens
 * Phase 0 foundation. Single source of truth for color, type, spacing, radius,
 * shadow, motion, and icon sizing.
 *
 * Do NOT hardcode any of these values in component or page CSS.
 * Reference them via var(--token-name).
 */

:root {
  /* ---------------------------------------------------------------
   * Color — Primary brand
   * ------------------------------------------------------------- */
  --color-primary: #15803D;
  --color-primary-hover: #166534;
  --color-primary-active: #14532D;
  --color-primary-soft: #DCFCE7;
  --color-primary-foreground: #FFFFFF;

  /* ---------------------------------------------------------------
   * Color — Surface & background
   * ------------------------------------------------------------- */
  --color-canvas: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-muted: #F5F5F4;
  --color-surface-dark: #1C1917;
  --color-surface-dark-foreground: #FAFAF7;

  /* ---------------------------------------------------------------
   * Color — Text
   * ------------------------------------------------------------- */
  --color-text-primary: #1C1917;
  --color-text-secondary: #78716C;
  --color-text-tertiary: #A8A29E;
  --color-text-on-dark: #FAFAF7;
  --color-text-on-dark-secondary: #A8A29E;

  /* ---------------------------------------------------------------
   * Color — Border & divider
   * ------------------------------------------------------------- */
  --color-border: #E7E5E4;
  --color-border-strong: #D6D3D1;
  --color-divider: #E7E5E4;

  /* ---------------------------------------------------------------
   * Color — Status
   * ------------------------------------------------------------- */
  --color-success: #16A34A;
  --color-success-soft: #DCFCE7;
  --color-success-text: #166534;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-warning-text: #92400E;
  --color-danger: #DC2626;
  --color-danger-soft: #FEE2E2;
  --color-info: #0369A1;
  --color-info-soft: #DBEAFE;

  /* ---------------------------------------------------------------
   * Color — Accent (sparingly)
   * ------------------------------------------------------------- */
  --color-accent: #FCD34D;

  /* ---------------------------------------------------------------
   * Color — Chart series (categorical, assigned in this order and never
   * cycled; validated for colour-blind separation on the white surface).
   * Slots 3–4 are under 3:1 contrast, so always print values beside them.
   * ------------------------------------------------------------- */
  --chart-series-1: #2A78D6;  /* blue */
  --chart-series-2: #EB6834;  /* orange */
  --chart-series-3: #1BAF7A;  /* aqua */
  --chart-series-4: #EDA100;  /* yellow */
  --chart-series-other: #A8A29E;

  /* ---------------------------------------------------------------
   * Color — Avatar tints (deterministic, hash-based, six only)
   * ------------------------------------------------------------- */
  --avatar-tint-1: #FEF3C7;
  --avatar-tint-2: #DCFCE7;
  --avatar-tint-3: #E0E7FF;
  --avatar-tint-4: #FCE7F3;
  --avatar-tint-5: #E7E5E4;
  --avatar-tint-6: #FED7AA;

  /* ---------------------------------------------------------------
   * Focus ring (used on inputs, buttons, links)
   * ------------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(21, 128, 61, 0.15);
  --focus-outline: 2px solid var(--color-primary);
  --focus-outline-offset: 2px;

  /* ---------------------------------------------------------------
   * Typography — Font stacks
   * ------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------------------------------------------------------------
   * Typography — Type scale (size / weight / line-height)
   * ------------------------------------------------------------- */
  --text-hero: 36px;
  --text-hero-weight: 600;
  --text-hero-leading: 1.1;

  --text-page-title: 24px;
  --text-page-title-weight: 600;
  --text-page-title-leading: 1.25;

  --text-metric: 28px;
  --text-metric-weight: 600;
  --text-metric-leading: 1.2;

  --text-h2: 20px;
  --text-h2-weight: 600;
  --text-h2-leading: 1.3;

  --text-h3: 16px;
  --text-h3-weight: 600;
  --text-h3-leading: 1.4;

  --text-body: 14px;
  --text-body-weight: 400;
  --text-body-leading: 1.5;

  --text-body-strong: 14px;
  --text-body-strong-weight: 500;
  --text-body-strong-leading: 1.5;

  --text-small: 13px;
  --text-small-weight: 400;
  --text-small-leading: 1.5;

  --text-tiny: 12px;
  --text-tiny-weight: 400;
  --text-tiny-leading: 1.4;

  --text-label: 11px;
  --text-label-weight: 500;
  --text-label-leading: 1.3;

  /* ---------------------------------------------------------------
   * Typography — Letter spacing
   * ------------------------------------------------------------- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ---------------------------------------------------------------
   * Spacing — 8px base grid (4px increments allowed)
   * ------------------------------------------------------------- */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------------------------------------------------------------
   * Border radius
   * ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------------
   * Shadows
   * ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* ---------------------------------------------------------------
   * Motion
   * ------------------------------------------------------------- */
  --transition-fast: 100ms ease-out;
  --transition: 150ms ease-out;
  --transition-slow: 250ms ease-out;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------------
   * Iconography
   * ------------------------------------------------------------- */
  --icon-sm: 16px;
  --icon: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;

  /* ---------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------- */
  --sidebar-width: 200px;
  --top-bar-height: 60px;
}