/* Apple-Glass dark theme surfaces (Phase 2) — auto-included on every page
   that loads themes.css. Light mode untouched. */
@import url("./dark-glass.css?v=20260609_modals_and_swatches");

:root {
  /* Light Mode (Default) - Matching Hive Control Panel */
  --primary-main: #7F56D9; /* Path Wounded Purple */
  --primary-light: #9A7EE5; /* Lighter shade of PW Purple */
  --primary-dark: #6A40C1;  /* Darker shade of PW Purple */
  --primary-contrast: #FFFFFF;

  /* Secondary color */
  --secondary-main: #10B981; /* Green */
  --secondary-light: #34D399;
  --secondary-dark: #059669;
  --secondary-contrast: #FFFFFF;

  --neutral-main: #6B7280;
  --neutral-light: #E5E7EB;
  --neutral-medium: #9CA3AF;
  --neutral-dark: #4B5563;
  --neutral-contrast: #FFFFFF;

  /* Background colors - Matching Hive Control Panel */
  --background-default: #F9FAFB; /* Light gray page background */
  --background-paper: #FFFFFF;   /* White for cards, sidebar, header */
  --background-primary: #FFFFFF; /* Primary background for widgets/cards */
  --background-secondary: #F9FAFB; /* Secondary background */
  
  --text-primary: #111827;       /* Dark text for light backgrounds */
  --text-secondary: #6B7280;     /* Medium gray text */
  --text-disabled: #9CA3AF;
  --text-on-primary-bg: var(--primary-contrast);

  --error-main: #EF4444;
  --warning-main: #F59E0B;
  --info-main: #3B82F6;
  --success-main: #10B981;

  --border-color: #E5E7EB;       /* Light gray borders */
  --border-color-light: #F3F4F6;
  --border-color-dark: #D1D5DB;  /* Slightly darker border */

  /* Component specific variables */
  --header-bg: var(--background-paper);
  --header-text: var(--text-primary);
  --header-border: var(--border-color);
  --header-height: 64px;

  --sidebar-bg: var(--background-paper);
  --sidebar-text: var(--text-primary);
  --sidebar-icon-color: var(--neutral-medium);
  --sidebar-border: var(--border-color);
  --sidebar-width: 260px;
  --sidebar-nav-link-hover-bg: var(--neutral-light);
  --sidebar-nav-link-active-bg: var(--primary-main);
  --sidebar-nav-link-active-text: var(--text-on-primary-bg);
  --sidebar-nav-link-active-icon: var(--text-on-primary-bg);

  --footer-bg: var(--background-default);
  --footer-text: var(--text-secondary);
  --footer-border: var(--border-color);
  --footer-height: 25px;

  /* Typography and spacing */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --border-radius: 8px; /* Default border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Shadows */
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --transition-speed: 0.2s;
  --transition-cubic: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --sidebar-collapsed-width: 80px;
  --background-header-table: var(--neutral-light);

  /* Additional variables for dashboard compatibility */
  --surface-ground: var(--background-default);
  --surface-card: var(--background-paper);
  --surface-border: var(--border-color);
  --surface-hover: #F3F4F6;
  --color-primary: var(--primary-main);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-border: var(--border-color);
  --theme-primary: var(--primary-main);
  --theme-background-secondary: var(--background-secondary);
  --theme-text-primary: var(--text-primary);
  --theme-card-shadow: var(--box-shadow-md);
  --background-accent: #F3F4F6;
  --background-color: var(--background-default);
  --input-background: #FFFFFF;
  --input-border: var(--border-color);
  --brand-primary: var(--primary-main);
  --brand-primary-dark: var(--primary-dark);
  
  /* Spacing variables */
  --space-2: 0.5rem;
  --space-4: 1rem;
  
  /* Widget specific colors */
  --widget-1-color: #7F56D9;
  --widget-2-color: #10B981;
  --widget-3-color: #3B82F6;

  /* Semantic color variants */
  --background-color-secondary: var(--background-paper);
  --border-color-soft: var(--border-color-light);
  --border-color-extralight: #F9FAFB;
  --border-radius-pill: 20px;
  --text-color-primary-muted: var(--text-secondary);

  /* Status colors */
  --color-warning: var(--warning-main);
  --color-warning-soft: #FFFBEB;
  --color-warning-dark: #B45309;
  --color-info: var(--info-main);
  --color-info-soft: #EFF6FF;
  --color-info-dark: #1E40AF;
  --color-success: var(--success-main);
  --color-success-soft: #F0FDF4;
  --color-success-dark: #15803D;
  --color-primary-soft: #F5F3FF;
  --color-primary-dark: var(--primary-dark);
}

[data-theme="dark"] {
  /* Dark Mode - Matching Hive Control Panel */
  --primary-main: #7F56D9; /* Same Path Wounded Purple */
  --primary-light: #9A7EE5;
  --primary-dark: #6A40C1;
  --primary-contrast: #FFFFFF;

  /* Secondary color */
  --secondary-main: #5C3DAA; /* Darker purple for secondary in dark mode */
  --secondary-light: #7F56D9;
  --secondary-dark: #4A2B8D;
  --secondary-contrast: #FFFFFF;

  --neutral-main: #A0ABC0; /* Lighter gray for text/elements in dark mode */
  --neutral-light: #4A5568; /* Hover states */
  --neutral-medium: #718096; /* Icon color, secondary text */
  --neutral-dark: #2D3748;   /* Borders or subtle dividers */
  --neutral-contrast: #0B0C0F;

  /* Background colors - Matching Hive Control Panel */
  --background-default: #0B0C0F; /* Very dark, near-black page background */
  --background-paper: #14151A;   /* Dark gray for cards, sidebar, header */
  --background-primary: #14151A; /* Primary background for widgets/cards */
  --background-secondary: #0B0C0F; /* Secondary background */
  
  --text-primary: #E0E7FF;       /* Light, slightly bluish text */
  --text-secondary: #A0ABC0;     /* Dimmer light gray */
  --text-disabled: #4A5568;
  --text-on-primary-bg: var(--primary-contrast);

  --error-main: #E53E3E;
  --warning-main: #DD6B20;
  --info-main: #3182CE;
  --success-main: #38A169;

  --border-color: #2A2B33;       /* Subtle dark border */
  --border-color-light: #374151; /* Lighter border for dark mode */
  --border-color-dark: #1F2937;  /* Darker border */

  /* Component specific variables */
  --header-bg: var(--background-paper);
  --header-text: var(--text-primary);
  --header-border: var(--border-color);

  --sidebar-bg: var(--background-paper);
  --sidebar-text: var(--text-primary);
  --sidebar-icon-color: var(--neutral-medium);
  --sidebar-border: var(--border-color);
  --sidebar-nav-link-hover-bg: var(--neutral-light);
  --sidebar-nav-link-active-bg: var(--primary-main);
  --sidebar-nav-link-active-text: var(--text-on-primary-bg);
  --sidebar-nav-link-active-icon: var(--text-on-primary-bg);

  --footer-bg: var(--background-default);
  --footer-text: var(--text-secondary);
  --footer-border: var(--border-color);
  --sidebar-collapsed-width: 80px;
  --background-header-table: var(--neutral-dark);

  /* Additional variables for dashboard compatibility */
  --surface-ground: var(--background-default);
  --surface-card: var(--background-paper);
  --surface-border: var(--border-color);
  --surface-hover: #1F2937;
  --color-primary: var(--primary-main);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-border: var(--border-color);
  --theme-primary: var(--primary-main);
  --theme-background-secondary: var(--background-secondary);
  --theme-text-primary: var(--text-primary);
  --theme-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --background-accent: #1F2937;
  --background-color: var(--background-default);
  --input-background: #1F2937;
  --input-border: var(--border-color);
  --brand-primary: var(--primary-main);
  --brand-primary-dark: var(--primary-dark);
  
  /* Widget specific colors */
  --widget-1-color: #9A7EE5;
  --widget-2-color: #38A169;
  --widget-3-color: #3182CE;

  /* Semantic color variants - DARK THEME */
  --background-color-secondary: var(--background-paper);
  --border-color-soft: var(--neutral-dark);
  --border-color-extralight: #1E1F24;
  --text-color-primary-muted: var(--neutral-medium);

  /* Status colors - DARK THEME */
  --color-warning-soft: #422006;
  --color-warning-dark: #FDE68A;
  --color-info-soft: #1E293B;
  --color-info-dark: #93C5FD;
  --color-success-soft: #062A16;
  --color-success-dark: #A7F3D0;
  --color-primary-soft: #2A2247;
}

/* =========================================================================
   APPLE-GLASS DARK THEME TOKENS (Phase 1)
   Brand gradient: cyan #22D3EE -> blue #3B82F6 -> purple #A855F7
   Matches MyBackbar Mix Cockpit, OrbXi Stylist app, orbxi.ai marketing.
   These tokens are additive only — no component consumes them yet.
   Components migrate in Phase 2+.
   ========================================================================= */

:root {
  /* Brand gradient stops - available in both themes for accents */
  --brand-cyan: #22D3EE;
  --brand-blue: #3B82F6;
  --brand-purple: #A855F7;
  --brand-purple-deep: #7C3AED;
  --brand-magenta: #D946EF;

  /* Composed gradients */
  --gradient-brand: linear-gradient(135deg, #22D3EE 0%, #3B82F6 50%, #A855F7 100%);
  --gradient-brand-reverse: linear-gradient(135deg, #A855F7 0%, #3B82F6 50%, #22D3EE 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(34,211,238,0.18) 0%, rgba(59,130,246,0.18) 50%, rgba(168,85,247,0.22) 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #22D3EE 0%, #A855F7 100%);
}

[data-theme="dark"] {
  /* ---- Layered page background (replaces flat #0B0C0F via opt-in body class) ----
     Apply via:  body.glass-bg { background: var(--bg-layered); }
     in Phase 2. For now this is a token only. */
  --bg-base: #07080D;
  --bg-elevated: #0E1018;
  --bg-layered:
    radial-gradient(1200px 800px at 8% -10%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(59, 130, 246, 0.14), transparent 65%),
    radial-gradient(900px 700px at 50% 110%, rgba(34, 211, 238, 0.12), transparent 60%),
    linear-gradient(180deg, #07080D 0%, #0A0C14 100%);

  /* ---- Glass surface tokens ---- */
  --glass-bg:            rgba(20, 21, 30, 0.55);
  --glass-bg-elevated:   rgba(28, 30, 42, 0.65);
  --glass-bg-strong:     rgba(34, 36, 50, 0.78);
  --glass-bg-overlay:    rgba(10, 11, 18, 0.55);   /* modal scrim */
  --glass-border:        rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-blur:          saturate(180%) blur(20px);
  --glass-blur-soft:     saturate(160%) blur(12px);
  --glass-blur-strong:   saturate(200%) blur(28px);
  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---- Brand glow halos (for hover / focus / hero accents) ---- */
  --glow-purple: 0 0 24px rgba(168, 85, 247, 0.40);
  --glow-cyan:   0 0 24px rgba(34, 211, 238, 0.35);
  --glow-blue:   0 0 24px rgba(59, 130, 246, 0.35);
  --glow-brand:  0 0 32px rgba(168, 85, 247, 0.30), 0 0 64px rgba(34, 211, 238, 0.18);

  /* ---- Override brand primary to magenta-purple to match orbxi.ai ---- */
  --brand-primary: var(--brand-purple);
  --brand-primary-dark: var(--brand-purple-deep);
}

/* Backdrop-filter fallback: solid surfaces when browser lacks support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] {
    --glass-bg:          #14151E;
    --glass-bg-elevated: #1C1E2A;
    --glass-bg-strong:   #232532;
    --glass-bg-overlay:  rgba(7, 8, 13, 0.85);
  }
}