/*
 * OpenBazaar.ai Design Tokens
 * Single source of truth for all design variables.
 * Include this file FIRST before any page-specific styles.
 */

:root {
  /* ── Brand Colors ──────────────────────────────────────── */
  --color-primary:      #7C3AED;
  --color-primary-dark: #6D28D9;
  --color-success:      #10B981;
  --color-danger:       #EF4444;
  --color-warning:      #F59E0B;
  --color-info:         #3B82F6;

  /* ── Surface & Background ──────────────────────────────── */
  --color-bg:           #F9FAFB;
  --color-bg-alt:       #F3F4F6;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F9FAFB;

  /* ── Text ──────────────────────────────────────────────── */
  --color-text:         #111827;
  --color-text-muted:   #6B7280;
  --color-text-subtle:  #9CA3AF;

  /* ── Borders ───────────────────────────────────────────── */
  --color-border:       #E5E7EB;
  --color-border-focus: #7C3AED;

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.10);

  /* ── Layout ────────────────────────────────────────────── */
  --max-w-xs:  480px;
  --max-w-sm:  640px;
  --max-w-md:  900px;
  --max-w-lg:  1100px;
  --max-w-xl:  1280px;

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ──────────────────────────────────────────────────────── */
  /* Short aliases used across existing pages                 */
  /* ──────────────────────────────────────────────────────── */
  --primary:      #7C3AED;
  --primary-dark: #6D28D9;
  --accent:       #7C3AED;
  --accent-hover: #6D28D9;
  --secondary:    #10B981;
  --success:      #10B981;
  --danger:       #EF4444;
  --warning:      #F59E0B;
  --background:   #F9FAFB;
  --surface:      #FFFFFF;
  --text:         #111827;
  --text-muted:   #6B7280;
  --border:       #E5E7EB;
  --border-focus: #7C3AED;
  --shadow:       rgba(0,0,0,0.1);
  --radius:       8px;

  /* ──────────────────────────────────────────────────────── */
  /* Legacy aliases for pages using old styles.css names      */
  /* ──────────────────────────────────────────────────────── */
  --bg-primary:   #F9FAFB;
  --bg-secondary: #FFFFFF;
  --bg-tertiary:  #F3F4F6;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --accent-color: #7C3AED;
  --border-color: #E5E7EB;
}