/**
 * Pincho Design System - Design Tokens
 *
 * Brand colors and design tokens for consistent styling across app, website, and emails.
 * Matches the Flutter app theme.dart color scheme.
 *
 * 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 - Pincho Brand Colors
   * ========================================================================== */

  /* Brand colors */
  --wp-color-primary: #31e3f8; /* Cyan - primary brand color */
  --wp-color-on-primary: #0e084f; /* Text on primary (deep indigo) */
  --wp-color-primary-container: #1a1452; /* Branded card background */
  --wp-color-on-primary-container: #31e3f8; /* Text on primary container */

  /* Secondary colors - Lime accent */
  --wp-color-secondary: #47ff00; /* Lime - secondary accent */
  --wp-color-on-secondary: #0e084f; /* Text on secondary */
  --wp-color-secondary-container: #2a2462; /* Branded field background */
  --wp-color-on-secondary-container: #47ff00; /* Text on secondary container */

  /* Tertiary colors - Magenta accent */
  --wp-color-tertiary: #ff00e5; /* Magenta - tertiary accent */
  --wp-color-on-tertiary: #ffffff; /* Text on tertiary */

  /* Surface colors - Dark backgrounds */
  --wp-color-surface: #111113; /* Main surface */
  --wp-color-on-surface: #fafafa; /* Text on surface */
  --wp-color-surface-variant: #18181b; /* Variant surface */
  --wp-color-on-surface-variant: #a1a1aa; /* Text on surface variant */
  --wp-color-surface-container: #18181b; /* Container surface */
  --wp-color-surface-container-high: #27272a; /* Elevated container */
  --wp-color-surface-container-highest: #3f3f46; /* Highest elevation */

  /* Background colors */
  --wp-color-background: #0a0a0b; /* Page background */
  --wp-color-on-background: #fafafa; /* Text on background */
  --wp-color-brand-background: #0e084f; /* Deep indigo - hero backgrounds */

  /* 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: #27272a; /* Borders and dividers */
  --wp-color-outline-variant: #3f3f46; /* Subtle outlines */

  /* Additional semantic colors */
  --wp-color-success: #47ff00; /* Success state (lime) */
  --wp-color-warning: #ffb74d; /* Warning state (orange) */
  --wp-color-info: #31e3f8; /* Info state (cyan) */

  /* ============================================================================
   * 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: #2bc9dd; /* Slightly darker cyan */
  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);
}