/**
 * Globalyst Group Theme - Master Theme File
 * 
 * A shareable theme file for consistent styling across Globalyst Group projects.
 * This file defines CSS custom properties for colors, typography, shadows, and spacing.
 * 
 * Usage in other projects:
 * 1. Copy this file to your project's styles directory
 * 2. Import it in your main entry file (e.g., main.tsx): import './styles/globalyst-theme.css';
 * 3. Import BEFORE your main CSS file to ensure proper cascade order
 * 4. Configure Tailwind to use these CSS variables (see tailwind.config.ts example)
 * 5. Add class="dark" to your html element for dark mode (default for Globalyst Group)
 * 
 * Color System:
 * - Primary: Gold/Amber (#D4A017 base) - Used for main CTAs and branding
 * - Accent: Emerald Green - Used for positive actions and success states
 * - Destructive: Red - Used for errors and destructive actions
 * - Neutral: Navy/Charcoal grays - Used for backgrounds, cards, and text
 * 
 * Typography:
 * - Sans: Inter - Primary UI font
 * - Mono: JetBrains Mono - Used for pricing and data
 * - Serif: Georgia - Used for formal/editorial content
 * 
 * Product Branding:
 * - Venture Compass (default): Gold primary (#D4A017)
 * - Venture Talent: Emerald Green primary (160 80% 40%)
 * - Venture Marketing: Pulse Red primary (10 90% 55%)
 * 
 * IMPORTANT: Light mode (:root) must be defined BEFORE dark mode (.dark) 
 * so that .dark overrides :root when the html element has class="dark"
 */

/* ============================================
   LIGHT MODE (Base/Fallback Theme)
   Clean white with gold accents
   Must be defined FIRST so .dark can override
   ============================================ */
:root {
  /* Interaction overlays */
  --button-outline: rgba(0,0,0, .10);
  --badge-outline: rgba(0,0,0, .05);
  --opaque-button-border-intensity: -8;

  /* Elevation overlays for hover/active states */
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);

  /* Core backgrounds */
  --background: 0 0% 100%;
  --foreground: 220 20% 12%;
  --border: 220 15% 88%;

  /* Card surfaces */
  --card: 0 0% 98%;
  --card-foreground: 220 20% 12%;
  --card-border: 220 12% 92%;

  /* Sidebar surfaces */
  --sidebar-background: 220 12% 96%;
  --sidebar-foreground: 220 20% 12%;
  --sidebar-border: 220 14% 90%;
  --sidebar-primary: 45 90% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 15% 88%;
  --sidebar-accent-foreground: 220 20% 20%;
  --sidebar-ring: 45 90% 45%;

  /* Popover surfaces */
  --popover: 0 0% 98%;
  --popover-foreground: 220 20% 12%;
  --popover-border: 220 14% 88%;

  /* Primary brand color - Gold (Default: Venture Compass) */
  --primary: 45 90% 45%;
  --primary-foreground: 0 0% 100%;

  /* Secondary - Light gray */
  --secondary: 220 12% 90%;
  --secondary-foreground: 220 20% 20%;

  /* Muted - Subtle backgrounds */
  --muted: 220 10% 91%;
  --muted-foreground: 220 10% 40%;

  /* Accent - Emerald green */
  --accent: 160 80% 40%;
  --accent-foreground: 0 0% 100%;

  /* Destructive - Error red */
  --destructive: 0 85% 45%;
  --destructive-foreground: 0 0% 100%;

  /* Form inputs */
  --input: 220 15% 75%;
  --ring: 45 90% 45%;

  /* Chart colors */
  --chart-1: 45 90% 45%;
  --chart-2: 160 80% 40%;
  --chart-3: 220 80% 50%;
  --chart-4: 30 85% 50%;
  --chart-5: 340 80% 48%;

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;

  /* Spacing and sizing */
  --radius: .5rem;
  --tracking-normal: -0.011em;
  --spacing: 0.25rem;

  /* Shadow system - Subtle light shadows */
  --shadow-2xs: 0px 1px 2px 0px hsl(220 20% 12% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(220 20% 12% / 0.08);
  --shadow-sm: 0px 2px 4px 0px hsl(220 20% 12% / 0.06), 0px 1px 2px -1px hsl(220 20% 12% / 0.08);
  --shadow: 0px 4px 6px -1px hsl(220 20% 12% / 0.08), 0px 2px 4px -2px hsl(220 20% 12% / 0.06);
  --shadow-md: 0px 6px 12px -2px hsl(220 20% 12% / 0.10), 0px 3px 6px -3px hsl(220 20% 12% / 0.08);
  --shadow-lg: 0px 10px 20px -4px hsl(220 20% 12% / 0.12), 0px 4px 8px -4px hsl(220 20% 12% / 0.08);
  --shadow-xl: 0px 20px 30px -8px hsl(220 20% 12% / 0.14), 0px 8px 12px -6px hsl(220 20% 12% / 0.10);
  --shadow-2xl: 0px 25px 50px -12px hsl(220 20% 12% / 0.20);

  /* Scrollbar colors */
  --scrollbar-track: hsl(220 12% 96%);
  --scrollbar-thumb: hsl(220 15% 75%);
  --scrollbar-thumb-hover: hsl(220 10% 55%);
  --scrollbar-background: hsl(220 12% 96%);

  /* Auto-computed borders with intensity adjustment */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --primary-border: hsl(var(--primary));
  --secondary-border: hsl(var(--secondary));
  --muted-border: hsl(var(--muted));
  --accent-border: hsl(var(--accent));
  --destructive-border: hsl(var(--destructive));
}

/* ============================================
   DARK MODE (Primary Theme - Globalyst Group)
   Deep navy/charcoal with gold accents
   Defined AFTER :root to override when active
   ============================================ */
.dark {
  /* Interaction overlays */
  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);
  --opaque-button-border-intensity: 9;

  /* Elevation overlays for hover/active states */
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);

  /* Core backgrounds */
  --background: 220 20% 8%;
  --foreground: 0 0% 98%;
  --border: 220 15% 20%;

  /* Card surfaces */
  --card: 220 18% 12%;
  --card-foreground: 0 0% 98%;
  --card-border: 220 15% 18%;

  /* Sidebar surfaces */
  --sidebar-background: 220 18% 10%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-border: 220 15% 20%;
  --sidebar-primary: 45 95% 55%;
  --sidebar-primary-foreground: 220 20% 8%;
  --sidebar-accent: 220 16% 18%;
  --sidebar-accent-foreground: 220 10% 70%;
  --sidebar-ring: 45 95% 55%;

  /* Popover surfaces */
  --popover: 220 18% 12%;
  --popover-foreground: 0 0% 98%;
  --popover-border: 220 15% 20%;

  /* Primary brand color - Gold (Default: Venture Compass) */
  --primary: 45 95% 55%;
  --primary-foreground: 220 20% 8%;

  /* Secondary - Muted navy */
  --secondary: 220 14% 20%;
  --secondary-foreground: 220 10% 70%;

  /* Muted - Subtle backgrounds */
  --muted: 220 12% 16%;
  --muted-foreground: 220 10% 55%;

  /* Accent - Emerald green */
  --accent: 160 75% 50%;
  --accent-foreground: 0 0% 98%;

  /* Destructive - Error red */
  --destructive: 0 80% 50%;
  --destructive-foreground: 0 0% 98%;

  /* Form inputs */
  --input: 220 15% 25%;
  --ring: 45 95% 55%;

  /* Chart colors */
  --chart-1: 45 95% 55%;
  --chart-2: 160 75% 50%;
  --chart-3: 220 75% 55%;
  --chart-4: 30 85% 55%;
  --chart-5: 340 75% 55%;

  /* Shadow system - Deep navy shadows */
  --shadow-2xs: 0px 1px 2px 0px hsl(220 20% 4% / 0.40);
  --shadow-xs: 0px 1px 3px 0px hsl(220 20% 4% / 0.50);
  --shadow-sm: 0px 2px 4px 0px hsl(220 20% 4% / 0.45), 0px 1px 2px -1px hsl(220 20% 4% / 0.50);
  --shadow: 0px 4px 6px -1px hsl(220 20% 4% / 0.50), 0px 2px 4px -2px hsl(220 20% 4% / 0.45);
  --shadow-md: 0px 6px 12px -2px hsl(220 20% 4% / 0.55), 0px 3px 6px -3px hsl(220 20% 4% / 0.50);
  --shadow-lg: 0px 10px 20px -4px hsl(220 20% 4% / 0.60), 0px 4px 8px -4px hsl(220 20% 4% / 0.50);
  --shadow-xl: 0px 20px 30px -8px hsl(220 20% 4% / 0.65), 0px 8px 12px -6px hsl(220 20% 4% / 0.55);
  --shadow-2xl: 0px 25px 50px -12px hsl(220 20% 4% / 0.75);

  /* Scrollbar colors */
  --scrollbar-track: hsl(220 18% 12%);
  --scrollbar-thumb: hsl(220 15% 25%);
  --scrollbar-thumb-hover: hsl(220 10% 35%);
  --scrollbar-background: hsl(220 20% 8%);

  /* Auto-computed borders with intensity adjustment */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --primary-border: hsl(var(--primary));
  --secondary-border: hsl(var(--secondary));
  --muted-border: hsl(var(--muted));
  --accent-border: hsl(var(--accent));
  --destructive-border: hsl(var(--destructive));
}

/* ============================================
   PRODUCT BRAND OVERRIDES
   Apply these classes to the html element
   alongside 'dark' to switch product branding
   ============================================ */

/* Venture Talent - Emerald Green Primary */
.brand-talent,
.brand-talent.dark {
  --primary: 160 80% 40%;
  --primary-foreground: 0 0% 100%;
  --ring: 160 80% 40%;
  --chart-1: 160 80% 40%;
  --sidebar-primary: 160 80% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 160 80% 40%;
}

.dark.brand-talent {
  --primary: 160 75% 50%;
  --primary-foreground: 0 0% 98%;
  --ring: 160 75% 50%;
  --chart-1: 160 75% 50%;
  --sidebar-primary: 160 75% 50%;
  --sidebar-primary-foreground: 220 20% 8%;
  --sidebar-ring: 160 75% 50%;
}

/* Venture Marketing - Pulse Red Primary */
.brand-marketing,
.brand-marketing.dark {
  --primary: 10 90% 55%;
  --primary-foreground: 0 0% 100%;
  --ring: 10 90% 55%;
  --chart-1: 10 90% 55%;
  --sidebar-primary: 10 90% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 10 90% 55%;
}

.dark.brand-marketing {
  --primary: 10 85% 60%;
  --primary-foreground: 0 0% 100%;
  --ring: 10 85% 60%;
  --chart-1: 10 85% 60%;
  --sidebar-primary: 10 85% 60%;
  --sidebar-primary-foreground: 220 20% 8%;
  --sidebar-ring: 10 85% 60%;
}

/* Venture Compass - Gold Primary (default, explicit class for clarity) */
.brand-compass,
.brand-compass.dark {
  /* Uses default gold values from :root and .dark */
}