/**
 * Thread.app Brand Theme
 *
 * Notion-inspired minimal design system with soft glow aesthetic.
 * Foundation: neutral grayscale (85%) + vibrant glow accents (15%).
 * Font: Geist Sans by Vercel.
 */

:root {
  /* ============================================
     FOUNDATION COLORS (85% of UI)
     ============================================ */

  /* Backgrounds */
  --color-bg-primary: #FCFCFC;
  --color-bg-secondary: #F7F7F7;
  --color-bg-tertiary: #F0F0F0;
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #F7F7F7;

  /* Text */
  --color-text-dark: #171717;
  --color-text-light: #525252;
  --color-text-muted: #737373;
  --color-text-white: #ffffff;

  /* Borders */
  --color-border: #E5E5E5;
  --color-border-light: #F0F0F0;
  --color-border-dark: rgba(0, 0, 0, 0.1);

  /* Hover */
  --color-hover: #F7F7F7;

  /* Overlays */
  --color-overlay-dark: rgba(0, 0, 0, 0.7);
  --color-overlay-medium: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.2);
  --color-overlay-white: rgba(255, 255, 255, 0.95);

  /* ============================================
     GLOW ACCENT COLORS (15% of UI)
     ============================================ */

  /* Trigger / Emerald — starts, phases, success, primary brand */
  --color-emerald: #22C55E;
  --color-emerald-dark: #16A34A;
  --color-emerald-light: #4ADE80;
  --color-emerald-bg: hsl(142, 50%, 96%);
  --color-emerald-text: hsl(142, 60%, 25%);
  --color-emerald-border: hsl(142, 45%, 85%);
  --glow-emerald: 0 4px 20px hsl(142 71% 45% / 0.35);
  --glow-emerald-strong: 0 4px 24px hsl(142 71% 45% / 0.5);

  /* Logic / Violet — decisions, routing */
  --color-violet: #A855F7;
  --color-violet-bg: hsl(262, 50%, 96%);
  --color-violet-text: hsl(262, 60%, 30%);
  --glow-violet: 0 4px 20px hsl(262 83% 58% / 0.35);

  /* Human / Amber — human tasks, waiting */
  --color-amber: #F59E0B;
  --color-amber-bg: hsl(38, 50%, 96%);
  --color-amber-text: hsl(38, 60%, 30%);
  --glow-amber: 0 4px 20px hsl(38 92% 50% / 0.35);

  /* Action / Blue — automated actions */
  --color-blue: #3B82F6;
  --color-blue-bg: hsl(217, 50%, 96%);
  --color-blue-text: hsl(217, 60%, 30%);
  --glow-blue: 0 4px 20px hsl(217 91% 60% / 0.35);

  /* Terminal / Gray — end states */
  --color-terminal: #737373;

  /* ============================================
     PRIMARY BRAND (mapped from Emerald)
     ============================================ */

  --color-primary: #22C55E;
  --color-primary-dark: #16A34A;
  --color-primary-light: #4ADE80;
  --color-secondary: #22C55E;

  /* Semantic Colors */
  --color-success: #22C55E;
  --color-success-light: #4ADE80;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* State Colors */
  --color-active: hsl(142, 50%, 96%);
  --color-active-text: var(--color-primary);
  --color-completed: hsl(142, 50%, 96%);
  --color-completed-text: var(--color-success);
  --color-pending: var(--color-bg-secondary);
  --color-pending-text: var(--color-text-light);

  /* ============================================
     GRADIENTS
     ============================================ */

  --gradient-primary: linear-gradient(135deg, #16A34A 0%, #22C55E 50%, #4ADE80 100%);
  --gradient-secondary: linear-gradient(135deg, hsl(142, 50%, 97%) 0%, hsl(142, 50%, 94%) 100%);
  --gradient-hero: linear-gradient(135deg, #FCFCFC 0%, #F7F7F7 50%, #F0F0F0 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
  --gradient-success: linear-gradient(90deg, #16A34A 0%, #22C55E 100%);

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

  /* Font Families */
  --font-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-monospace: 'Geist Mono', 'Courier New', monospace;
  --font-serif: Georgia, serif;

  /* Font Sizes (Geist scale) */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 19px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;
  --font-size-6xl: 42px;
  --font-size-7xl: 48px;
  --font-size-8xl: 56px;
  --font-size-hero: 56px;
  --font-size-hero-mobile: 36px;
  --font-size-hero-mobile-sm: 28px;

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

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;
  --line-height-base: 1.45;
  --line-height-heading: 1.2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;
  --letter-spacing-wider: 0.5px;

  /* ============================================
     SPACING
     ============================================ */

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

  --section-padding: 100px;
  --section-padding-mobile: 60px;
  --section-padding-sm: 60px;

  --container-max-width: 1200px;
  --container-padding: 24px;
  --container-padding-mobile: 20px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-2xl: 40px;
  --gap-3xl: 60px;

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* Glow Shadows (brand) */
  --shadow-primary: var(--glow-emerald);
  --shadow-primary-hover: var(--glow-emerald-strong);
  --shadow-primary-lg: 0 10px 30px hsl(142 71% 45% / 0.25);
  --shadow-primary-xl: 0 15px 40px hsl(142 71% 45% / 0.2);
  --shadow-secondary: 0 4px 12px hsl(142 71% 45% / 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 9999px;
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-button-sm: 6px;
  --radius-badge: 9999px;
  --radius-badge-sm: 6px;
  --radius-input: 8px;

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 400ms;
  --transition-slower: 600ms;

  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-all: all var(--transition-base) var(--ease-out);
  --transition-color: color var(--transition-fast) var(--ease-out);
  --transition-transform: transform var(--transition-base) var(--ease-out);
  --transition-shadow: box-shadow var(--transition-base) var(--ease-out);
  --transition-opacity: opacity var(--transition-base) var(--ease-out);

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-navbar: 1000;
  --z-video-modal: 10000;
  --z-calendly-modal: 10000;

  /* ============================================
     BREAKPOINTS
     ============================================ */

  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 968px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  --max-width-xs: 480px;
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1400px;

  /* ============================================
     COMPONENT TOKENS
     ============================================ */

  --button-padding-y: 14px;
  --button-padding-x: 32px;
  --button-padding-y-sm: 10px;
  --button-padding-x-sm: 20px;
  --button-font-weight: var(--font-weight-semibold);
  --button-border-radius: var(--radius-button);

  --input-padding-y: 14px;
  --input-padding-x: 20px;
  --input-border-width: 2px;
  --input-border-radius: var(--radius-input);
  --input-font-size: var(--font-size-md);

  --card-padding: 32px;
  --card-padding-sm: 24px;
  --card-border-radius: var(--radius-card);
  --card-gap: 32px;

  --badge-padding-y: 4px;
  --badge-padding-x: 12px;
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semibold);
  --badge-border-radius: var(--radius-badge);

  --nav-height: auto;
  --nav-padding-y: 16px;
  --nav-backdrop-blur: 20px;

  --hero-padding-top: 140px;
  --hero-padding-bottom: 80px;
  --hero-padding-top-mobile: 120px;
  --hero-padding-bottom-mobile: 60px;

  --footer-padding-y: 60px;
  --footer-padding-bottom: 30px;
  --footer-min-height: 700px;

  /* ============================================
     LEGACY COMPATIBILITY
     ============================================ */

  --primary-color: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --secondary-color: var(--color-secondary);
  --text-dark: var(--color-text-dark);
  --text-light: var(--color-text-light);
  --text-muted: var(--color-text-muted);
  --bg-dark: var(--color-bg-primary);
  --bg-darker: var(--color-bg-secondary);
  --bg-card: var(--color-bg-card);
  --bg-card-hover: var(--color-bg-card-hover);
  --border-color: var(--color-border);
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --danger-color: var(--color-danger);
}

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

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-dark { color: var(--color-text-dark); }
.text-light { color: var(--color-text-light); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-card { background-color: var(--color-bg-card); }

.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-primary { box-shadow: var(--shadow-primary); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }