/*
 * Wendo Design Tokens
 * Shared CSS custom properties for all frontend applications.
 * Import this file in landing, admin, and PWA.
 *
 * Usage:
 *   @import url('/path/to/tokens.css');
 *   color: var(--wendo-primary);
 */

/* ============================================
   Font
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --wendo-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ============================================
     Colors — Light Mode
     ============================================ */

  /* Primary (Red — from logo) */
  --wendo-primary: #E31E24;
  --wendo-primary-hover: #C41A1F;
  --wendo-primary-light: #FDE8E8;
  --wendo-primary-muted: rgba(227, 30, 36, 0.1);

  /* Secondary (Green — from logo) */
  --wendo-secondary: #1A8C5B;
  --wendo-secondary-hover: #157A4E;
  --wendo-secondary-light: #E6F5EE;

  /* Accent (Orange — from logo) */
  --wendo-accent: #E8872A;
  --wendo-accent-light: #FEF3E7;

  /* Semantic */
  --wendo-success: #10B981;
  --wendo-warning: #F59E0B;
  --wendo-danger: #DC2626;

  /* Neutral */
  --wendo-foreground: #1A1A2E;
  --wendo-muted: #6B7280;
  --wendo-background: #FFFFFF;
  --wendo-surface: #F8F9FC;
  --wendo-border: #E5E7EB;

  /* Rating */
  --wendo-star-filled: #F59E0B;
  --wendo-star-empty: #E5E7EB;

  /* ============================================
     Typography
     ============================================ */
  --wendo-text-xs: 0.75rem;
  --wendo-text-sm: 0.875rem;
  --wendo-text-base: 1rem;
  --wendo-text-lg: 1.25rem;
  --wendo-text-xl: 1.5rem;
  --wendo-text-2xl: 1.75rem;
  --wendo-text-3xl: 2.25rem;
  --wendo-text-4xl: 3rem;

  --wendo-leading-tight: 1.2;
  --wendo-leading-normal: 1.5;

  --wendo-tracking-tight: -0.02em;
  --wendo-tracking-normal: 0;
  --wendo-tracking-wide: 0.01em;

  --wendo-font-regular: 400;
  --wendo-font-medium: 500;
  --wendo-font-semibold: 600;
  --wendo-font-bold: 700;
  --wendo-font-extrabold: 800;

  /* ============================================
     Spacing (4px base grid)
     ============================================ */
  --wendo-space-1: 0.25rem;
  --wendo-space-2: 0.5rem;
  --wendo-space-3: 0.75rem;
  --wendo-space-4: 1rem;
  --wendo-space-5: 1.25rem;
  --wendo-space-6: 1.5rem;
  --wendo-space-8: 2rem;
  --wendo-space-10: 2.5rem;
  --wendo-space-12: 3rem;
  --wendo-space-16: 4rem;
  --wendo-space-20: 5rem;
  --wendo-space-24: 6rem;

  /* ============================================
     Borders & Radius
     ============================================ */
  --wendo-radius-sm: 4px;
  --wendo-radius-md: 8px;
  --wendo-radius-lg: 12px;
  --wendo-radius-full: 9999px;

  /* ============================================
     Shadows
     ============================================ */
  --wendo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --wendo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --wendo-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* ============================================
     Transitions
     ============================================ */
  --wendo-transition-fast: 150ms ease;
  --wendo-transition-normal: 200ms ease;
  --wendo-transition-slow: 300ms ease;

  /* ============================================
     Component Tokens
     ============================================ */

  /* Buttons */
  --wendo-btn-padding-x: var(--wendo-space-6);
  --wendo-btn-padding-y: var(--wendo-space-3);
  --wendo-btn-radius: var(--wendo-radius-md);
  --wendo-btn-font-size: var(--wendo-text-sm);
  --wendo-btn-font-weight: var(--wendo-font-semibold);

  /* Cards */
  --wendo-card-radius: var(--wendo-radius-lg);
  --wendo-card-shadow: var(--wendo-shadow-sm);
  --wendo-card-shadow-hover: var(--wendo-shadow-md);
  --wendo-card-padding: var(--wendo-space-6);

  /* Inputs */
  --wendo-input-radius: var(--wendo-radius-md);
  --wendo-input-border: var(--wendo-border);
  --wendo-input-focus-ring: var(--wendo-primary);
  --wendo-input-padding-x: var(--wendo-space-4);
  --wendo-input-padding-y: var(--wendo-space-3);

  /* Badges */
  --wendo-badge-radius: var(--wendo-radius-full);
  --wendo-badge-padding-x: var(--wendo-space-3);
  --wendo-badge-padding-y: var(--wendo-space-1);

  /* Avatars */
  --wendo-avatar-sm: 32px;
  --wendo-avatar-md: 40px;
  --wendo-avatar-lg: 48px;
  --wendo-avatar-xl: 64px;
}

/* ============================================
   Dark Mode
   ============================================ */
:root.dark,
:root[data-theme="dark"] {
  --wendo-primary: #EF4444;
  --wendo-primary-hover: #DC2626;
  --wendo-primary-light: #3B1A1A;
  --wendo-primary-muted: rgba(239, 68, 68, 0.1);

  --wendo-secondary: #34D399;
  --wendo-secondary-hover: #10B981;
  --wendo-secondary-light: #1A2E25;

  --wendo-accent: #FBBF24;
  --wendo-accent-light: #2E2A1A;

  --wendo-foreground: #F1F1F6;
  --wendo-muted: #9CA3AF;
  --wendo-background: #0F0F1A;
  --wendo-surface: #1A1A2E;
  --wendo-border: #2D2D44;

  --wendo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --wendo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --wendo-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wendo-primary: #EF4444;
    --wendo-primary-hover: #DC2626;
    --wendo-primary-light: #3B1A1A;
    --wendo-primary-muted: rgba(239, 68, 68, 0.1);

    --wendo-secondary: #34D399;
    --wendo-secondary-hover: #10B981;
    --wendo-secondary-light: #1A2E25;

    --wendo-accent: #FBBF24;
    --wendo-accent-light: #2E2A1A;

    --wendo-foreground: #F1F1F6;
    --wendo-muted: #9CA3AF;
    --wendo-background: #0F0F1A;
    --wendo-surface: #1A1A2E;
    --wendo-border: #2D2D44;

    --wendo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --wendo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --wendo-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}