/**
 * WirePusher Design System - Design Tokens
 *
 * Material 3 design tokens extracted from Flutter app theme.
 * Uses teal as the seed color for consistent branding across app, website, and emails.
 *
 * Usage:
 *   - Import this file in HTML pages
 *   - Reference colors using var(--wp-color-primary)
 *   - For emails, use the emailStyles.ts helper (inline CSS required)
 */

:root {
  /* ============================================================================
   * COLOR PALETTE - Material 3 Dark Theme (Teal Seed)
   * ========================================================================== */

  /* Primary colors - Teal accent */
  --wp-color-primary: #80CBC4;              /* Primary teal - main brand color */
  --wp-color-on-primary: #00363A;           /* Text on primary */
  --wp-color-primary-container: #004D52;    /* Darker teal container */
  --wp-color-on-primary-container: #9EEBE3; /* Text on primary container */

  /* Secondary colors - Muted teal-gray */
  --wp-color-secondary: #B2CCC8;            /* Secondary muted teal */
  --wp-color-on-secondary: #1D3532;         /* Text on secondary */
  --wp-color-secondary-container: #344340;  /* Secondary container */
  --wp-color-on-secondary-container: #CEE9E4; /* Text on secondary container */

  /* Tertiary colors - Complementary */
  --wp-color-tertiary: #B3C5DD;             /* Tertiary blue-gray */
  --wp-color-on-tertiary: #1D303F;          /* Text on tertiary */

  /* Surface colors - Dark backgrounds */
  --wp-color-surface: #1A1C1E;              /* Main surface (dark gray) */
  --wp-color-on-surface: #E1E2E5;           /* Text on surface (light) */
  --wp-color-surface-variant: #3F4948;      /* Variant surface */
  --wp-color-on-surface-variant: #BEC9C7;   /* Text on surface variant */
  --wp-color-surface-container: #1E2022;    /* Container surface */
  --wp-color-surface-container-high: #282A2C; /* Elevated container */
  --wp-color-surface-container-highest: #333537; /* Highest elevation */

  /* Background colors */
  --wp-color-background: #1A1C1E;           /* Page background (same as surface) */
  --wp-color-on-background: #E1E2E5;        /* Text on background */

  /* Error colors */
  --wp-color-error: #F2B8B5;                /* Error state (light red) */
  --wp-color-on-error: #601410;             /* Text on error */
  --wp-color-error-container: #8C1D18;      /* Error container */
  --wp-color-on-error-container: #F9DEDC;   /* Text on error container */

  /* Outline colors */
  --wp-color-outline: #889392;              /* Borders and dividers */
  --wp-color-outline-variant: #3F4948;      /* Subtle outlines */

  /* Additional semantic colors */
  --wp-color-success: #81C784;              /* Success state (green) */
  --wp-color-warning: #FFB74D;              /* Warning state (orange) */
  --wp-color-info: #64B5F6;                 /* Info state (blue) */

  /* ============================================================================
   * TYPOGRAPHY
   * ========================================================================== */

  /* Font families */
  --wp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
  --wp-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
                         Consolas, 'Courier New', monospace;

  /* Font sizes - Material 3 type scale */
  --wp-font-size-display-large: 57px;
  --wp-font-size-display-medium: 45px;
  --wp-font-size-display-small: 36px;
  --wp-font-size-headline-large: 32px;
  --wp-font-size-headline-medium: 28px;
  --wp-font-size-headline-small: 24px;
  --wp-font-size-title-large: 22px;
  --wp-font-size-title-medium: 16px;
  --wp-font-size-title-small: 14px;
  --wp-font-size-body-large: 16px;
  --wp-font-size-body-medium: 14px;
  --wp-font-size-body-small: 12px;
  --wp-font-size-label-large: 14px;
  --wp-font-size-label-medium: 12px;
  --wp-font-size-label-small: 11px;

  /* Font weights */
  --wp-font-weight-regular: 400;
  --wp-font-weight-medium: 500;
  --wp-font-weight-semibold: 600;
  --wp-font-weight-bold: 700;

  /* Line heights */
  --wp-line-height-tight: 1.2;
  --wp-line-height-normal: 1.5;
  --wp-line-height-relaxed: 1.7;

  /* ============================================================================
   * SPACING - Material 3 spacing scale
   * ========================================================================== */

  --wp-space-0: 0px;
  --wp-space-1: 4px;
  --wp-space-2: 8px;
  --wp-space-3: 12px;
  --wp-space-4: 16px;
  --wp-space-5: 20px;
  --wp-space-6: 24px;
  --wp-space-7: 28px;
  --wp-space-8: 32px;
  --wp-space-10: 40px;
  --wp-space-12: 48px;
  --wp-space-16: 64px;
  --wp-space-20: 80px;
  --wp-space-24: 96px;

  /* ============================================================================
   * BORDER RADIUS - Material 3 shape scale
   * ========================================================================== */

  --wp-radius-none: 0px;
  --wp-radius-xs: 4px;
  --wp-radius-sm: 8px;
  --wp-radius-md: 12px;
  --wp-radius-lg: 16px;
  --wp-radius-xl: 20px;
  --wp-radius-2xl: 28px;
  --wp-radius-full: 9999px;

  /* ============================================================================
   * ELEVATION / SHADOWS - Material 3 elevation
   * ========================================================================== */

  --wp-shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.3),
                 0px 1px 3px 1px rgba(0, 0, 0, 0.15);

  --wp-shadow-2: 0px 1px 2px rgba(0, 0, 0, 0.3),
                 0px 2px 6px 2px rgba(0, 0, 0, 0.15);

  --wp-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
                 0px 1px 3px rgba(0, 0, 0, 0.3);

  --wp-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15),
                 0px 2px 3px rgba(0, 0, 0, 0.3);

  --wp-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15),
                 0px 4px 4px rgba(0, 0, 0, 0.3);

  /* ============================================================================
   * TRANSITIONS
   * ========================================================================== */

  --wp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --wp-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --wp-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================================
   * Z-INDEX SCALE
   * ========================================================================== */

  --wp-z-base: 0;
  --wp-z-elevated: 10;
  --wp-z-sticky: 100;
  --wp-z-fixed: 500;
  --wp-z-modal: 1000;
  --wp-z-popover: 1500;
  --wp-z-tooltip: 2000;
}

/* ============================================================================
 * BASE STYLES
 * ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--wp-font-family);
  font-size: var(--wp-font-size-body-large);
  font-weight: var(--wp-font-weight-regular);
  line-height: var(--wp-line-height-normal);
  color: var(--wp-color-on-background);
  background-color: var(--wp-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
 * UTILITY CLASSES
 * ========================================================================== */

.wp-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp-space-4);
  padding-right: var(--wp-space-4);
}

@media (min-width: 768px) {
  .wp-container {
    padding-left: var(--wp-space-6);
    padding-right: var(--wp-space-6);
  }
}

@media (min-width: 1024px) {
  .wp-container {
    padding-left: var(--wp-space-8);
    padding-right: var(--wp-space-8);
  }
}

/* Surface card */
.wp-surface {
  background-color: var(--wp-color-surface-container);
  border-radius: var(--wp-radius-lg);
  box-shadow: var(--wp-shadow-1);
}

/* Button styles */
.wp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp-space-3) var(--wp-space-6);
  font-size: var(--wp-font-size-label-large);
  font-weight: var(--wp-font-weight-semibold);
  border-radius: var(--wp-radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--wp-transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.wp-button-primary {
  background-color: var(--wp-color-primary);
  color: var(--wp-color-on-primary);
}

.wp-button-primary:hover {
  background-color: var(--wp-color-primary-container);
  box-shadow: var(--wp-shadow-2);
  transform: translateY(-1px);
}

.wp-button-secondary {
  background-color: var(--wp-color-secondary-container);
  color: var(--wp-color-on-secondary-container);
}

.wp-button-secondary:hover {
  background-color: var(--wp-color-secondary);
  box-shadow: var(--wp-shadow-2);
  transform: translateY(-1px);
}

/* Text styles */
.wp-display-large { font-size: var(--wp-font-size-display-large); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-tight); }
.wp-display-medium { font-size: var(--wp-font-size-display-medium); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-tight); }
.wp-display-small { font-size: var(--wp-font-size-display-small); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-tight); }
.wp-headline-large { font-size: var(--wp-font-size-headline-large); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-tight); }
.wp-headline-medium { font-size: var(--wp-font-size-headline-medium); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-normal); }
.wp-headline-small { font-size: var(--wp-font-size-headline-small); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-normal); }
.wp-title-large { font-size: var(--wp-font-size-title-large); font-weight: var(--wp-font-weight-medium); line-height: var(--wp-line-height-normal); }
.wp-title-medium { font-size: var(--wp-font-size-title-medium); font-weight: var(--wp-font-weight-medium); line-height: var(--wp-line-height-normal); }
.wp-title-small { font-size: var(--wp-font-size-title-small); font-weight: var(--wp-font-weight-medium); line-height: var(--wp-line-height-normal); }
.wp-body-large { font-size: var(--wp-font-size-body-large); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-relaxed); }
.wp-body-medium { font-size: var(--wp-font-size-body-medium); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-normal); }
.wp-body-small { font-size: var(--wp-font-size-body-small); font-weight: var(--wp-font-weight-regular); line-height: var(--wp-line-height-normal); }