/* ============ */
/* Design Tokens - Foundation */
/* ============ */
/* Central source of truth for all design tokens */
/* All components should reference these tokens */

:root {
  /* ============ */
  /* Viewport/Safe-area helpers */
  /* ============ */
  /* Use dynamic viewport units where supported to avoid mobile address-bar "100vh" issues */
  --viewport-h: 100vh;
  --viewport-w: 100vw;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);

  /* ============ */
  /* Spacing Scale (8px base) */
  /* ============ */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 5rem;     /* 80px */
  --space-8: 6rem;     /* 96px */

  /* ============ */
  /* Typography Scale */
  /* ============ */
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3rem;       /* 48px */

  /* Heading Sizes */
  --heading-1: 2.5rem;    /* 40px */
  --heading-2: 2rem;      /* 32px */
  --heading-3: 1.5rem;    /* 24px */
  --heading-4: 1.25rem;   /* 20px */
  --heading-5: 1.125rem;  /* 18px */
  --heading-6: 1rem;      /* 16px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ============ */
  /* Border Radius */
  /* ============ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ============ */
  /* Shadows - Elevation System */
  /* ============ */
  --shadow-xs: 0 1px 2px rgba(20, 20, 25, 0.55);
  --shadow-sm: 0 2px 6px rgba(20, 20, 25, 0.5);
  --shadow-md: 0 4px 10px rgba(20, 20, 25, 0.55);
  --shadow-lg: 0 6px 16px rgba(20, 20, 25, 0.58);
  --shadow-xl: 0 10px 24px rgba(20, 20, 25, 0.62);
  --shadow-2xl: 0 16px 36px rgba(20, 20, 25, 0.65);
  --shadow-3xl: 0 24px 48px rgba(20, 20, 25, 0.68);

  /* Primary color shadows */
  --shadow-primary: 0 18px 35px hsl(260 50% 60% / 0.4);
  --shadow-primary-hover: 0 24px 45px hsl(260 50% 60% / 0.5);

  /* ============ */
  /* Transitions */
  /* ============ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ============ */
  /* Circuit System Colors */
  /* ============ */
  --circuit-black: #0f0f12;  /* Softer dark grey (was #050508) */
  --circuit-charcoal: #121216;  /* Softer dark grey (was #0a0a0f) */
  --circuit-surface: #1a1a1f;  /* Lighter dark grey (was #111118) */
  --circuit-elevated: #1f1f24;  /* Lighter dark grey (was #16161f) */
  
  /* Purple Signal Family - accents only, matching landing page buttons exactly */
  /* Note: Dark mode overrides these with darker values */
  --signal-purple: #a855f7;  /* Purple base for accents */
  --signal-purple-dim: rgba(168, 85, 247, 0.1);  /* Purple background */
  --signal-purple-glow: rgba(168, 85, 247, 0.1);  /* Purple background for glow */
  --signal-purple-edge: rgba(168, 85, 247, 0.4);  /* Purple border */

  /* ============ */
  /* Brand Accent (single source of truth) */
  /* ============ */
  /* Use these for any "TeamUp purple" UI accents (buttons, toggles, focus, chips). */
  --brand-accent: var(--signal-purple);
  --brand-accent-bg: var(--signal-purple-dim);
  --brand-accent-border: var(--signal-purple-edge);
  --brand-accent-glow: var(--signal-purple-glow);
  --brand-accent-text: var(--brand-accent);
  /* Hover states (progressive enhancement; keep base vars as fallback) */
  --brand-accent-bg-hover: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --brand-accent-border-hover: color-mix(in srgb, var(--brand-accent) 55%, transparent);
  
  /* Information (white spectrum) */
  --info-white: #ffffff;
  --info-text: #e5e5eb;
  --info-muted: #a0a0b0;
  
  /* Structure (gray spectrum) */
  --struct-gray: #4a4a5a;
  --struct-border: rgba(255, 255, 255, 0.08);
  --struct-surface: rgba(255, 255, 255, 0.03);
  
  /* Motion Tokens - Circuit System Philosophy */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 350ms;
  --motion-ease: ease-out;  /* No spring, no overshoot */
  --motion-linear: linear;

  /* ============ */
  /* Breakpoints */
  /* ============ */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;
  --breakpoint-wide: 1536px;

  /* ============ */
  /* Mobile-Specific Tokens */
  /* ============ */
  /* Compact spacing scale (6px base) for mobile */
  --mobile-space-1: 0.375rem;   /* 6px */
  --mobile-space-2: 0.75rem;    /* 12px */
  --mobile-space-3: 1rem;       /* 16px */
  --mobile-space-4: 1.25rem;    /* 20px */
  --mobile-space-5: 1.5rem;     /* 24px */

  /* Compact typography scale for mobile */
  --mobile-text-xs: 0.6875rem;   /* 11px - minimum readable on mobile */
  --mobile-text-sm: 0.8125rem;   /* 13px */
  --mobile-text-base: 0.9375rem; /* 15px - slightly smaller than desktop */
  --mobile-text-lg: 1.0625rem;   /* 17px */

  /* Compact border radius for mobile */
  --mobile-radius-sm: 6px;
  --mobile-radius-md: 8px;
  --mobile-radius-lg: 10px;
}

@supports (height: 100dvh) {
  :root {
    --viewport-h: 100dvh;
  }
}

@supports (width: 100dvw) {
  :root {
    --viewport-w: 100dvw;
  }
}

/* ============ */
/* Dark Mode Specific Tokens */
/* ============ */
/* These will be overridden by theme.css but defined here for reference */
.dark-mode {
  /* Spacing and typography remain the same */
  /* Shadows may be adjusted in theme.css */
}

/* ============ */
/* Motion Philosophy - Circuit System */
/* ============ */
@media (prefers-reduced-motion: no-preference) {
  /* All transitions use linear or soft ease-out - never spring */
  * {
    --transition-timing: var(--motion-ease);
  }
}

/* Explicitly forbidden patterns */
.no-bounce { 
  animation-timing-function: ease-out !important; 
}

.no-scale-bounce { 
  transform: none !important; 
}