/* Negavia Brand Color System & Central Design Tokens (Fluid Intelligence) */
:root {
  /* 1. Brand Color Priority (AGENTS.md Strict Specs) */
  --brand-primary: #6428F5;          /* Electric Violet - Main CTAs, active nav, selected states */
  --brand-secondary: #08C7E8;        /* Digital Cyan - Secondary accents, supporting icons & highlights */
  --brand-supporting: #345AFB;       /* Digital Blue - Gradient transition & supporting accents */
  --brand-dark: #11152B;             /* Deep Navy - Primary text, headings & dark surfaces */
  --brand-bg: #F5F6FC;               /* Cloud White - Main application background & light surfaces */
  --brand-gradient: linear-gradient(110deg, #6428F5 0%, #345AFB 52%, #08C7E8 100%);
  --brand-gradient-hover: linear-gradient(110deg, #5720db 0%, #2b4edb 52%, #07b5d3 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(100, 40, 245, 0.08) 0%, rgba(52, 90, 251, 0.05) 50%, rgba(8, 199, 232, 0.08) 100%);
  --brand-glow-radial: radial-gradient(circle at 50% 0%, rgba(100, 40, 245, 0.14) 0%, rgba(8, 199, 232, 0.04) 50%, transparent 75%);

  /* 2. Surfaces & Surfaces (Light Mode) */
  --surface-bg: var(--brand-bg);
  --surface-card: #FFFFFF;
  --surface-card-hover: #FFFFFF;
  --surface-alt: #EEF1FA;
  --surface-topbar: rgba(255, 255, 255, 0.88);
  --surface-topbar-text: var(--brand-dark);
  --surface-glass: rgba(255, 255, 255, 0.82);
  --surface-glass-border: rgba(220, 225, 242, 0.8);
  --surface-focus-ring: rgba(100, 40, 245, 0.22);
  --surface-soft-primary: rgba(100, 40, 245, 0.08);
  --surface-soft-secondary: rgba(8, 199, 232, 0.10);
  --surface-soft-accent: rgba(8, 199, 232, 0.12);
  
  /* Typography Colors */
  --text-primary: var(--brand-dark);
  --text-secondary: #475070;
  --text-muted: #7E89A8;
  --text-on-primary: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: #DCE1F2;
  --border-input: #C6CEE6;
  --border-focus: var(--brand-primary);
  --border-card-glow: rgba(100, 40, 245, 0.28);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(17, 21, 43, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 21, 43, 0.08);
  --shadow-lg: 0 16px 38px -4px rgba(17, 21, 43, 0.12);
  --shadow-card: 0 4px 20px -2px rgba(17, 21, 43, 0.05), 0 2px 6px -1px rgba(17, 21, 43, 0.03);
  --shadow-card-hover: 0 16px 36px -4px rgba(100, 40, 245, 0.14), 0 4px 14px -2px rgba(17, 21, 43, 0.06);
  --shadow-glow-primary: 0 8px 24px -4px rgba(100, 40, 245, 0.40);
  --shadow-glow-secondary: 0 8px 24px -4px rgba(8, 199, 232, 0.35);

  /* 3. Semantic Status Colors (Strictly separated from Brand Cyan/Violet) */
  --status-success: #16A34A;
  --status-success-bg: #DCFCE7;
  --status-success-text: #166534;
  --status-warning: #D97706;
  --status-warning-bg: #FEF3C7;
  --status-warning-text: #92400E;
  --status-error: #DC2626;
  --status-error-bg: #FEE2E2;
  --status-error-text: #991B1B;
  --status-error-ring: rgba(220, 38, 38, 0.35);
  --status-info: #2563EB;
  --status-info-bg: #DBEAFE;
  --status-info-text: #1E40AF;

  /* 4. Geometry & Animations */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-bg: #0C0F22;
    --surface-card: #151A38;
    --surface-card-hover: #192044;
    --surface-alt: #1D244D;
    --surface-topbar: rgba(12, 15, 34, 0.85);
    --surface-topbar-text: #F5F6FC;
    --surface-glass: rgba(21, 26, 56, 0.82);
    --surface-glass-border: rgba(68, 79, 138, 0.45);
    --surface-soft-primary: rgba(100, 40, 245, 0.22);
    --surface-soft-secondary: rgba(8, 199, 232, 0.16);
    --surface-soft-accent: rgba(8, 199, 232, 0.18);
    
    --text-primary: #F5F6FC;
    --text-secondary: #B1BAD6;
    --text-muted: #7A85A8;
    --border-subtle: #272F58;
    --border-input: #384277;
    --border-card-glow: rgba(100, 40, 245, 0.42);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 16px 40px -4px rgba(100, 40, 245, 0.28), 0 6px 18px rgba(0, 0, 0, 0.4);

    --status-success-bg: rgba(22, 163, 74, 0.22);
    --status-success-text: #86EFAC;
    --status-warning-bg: rgba(217, 119, 6, 0.22);
    --status-warning-text: #FCD34D;
    --status-error-bg: rgba(220, 38, 38, 0.22);
    --status-error-text: #FCA5A5;
    --status-info-bg: rgba(37, 99, 235, 0.22);
    --status-info-text: #93C5FD;
  }
}

:root[data-theme="dark"] {
  --surface-bg: #0C0F22;
  --surface-card: #151A38;
  --surface-card-hover: #192044;
  --surface-alt: #1D244D;
  --surface-topbar: rgba(12, 15, 34, 0.85);
  --surface-topbar-text: #F5F6FC;
  --surface-glass: rgba(21, 26, 56, 0.82);
  --surface-glass-border: rgba(68, 79, 138, 0.45);
  --surface-soft-primary: rgba(100, 40, 245, 0.22);
  --surface-soft-secondary: rgba(8, 199, 232, 0.16);
  --surface-soft-accent: rgba(8, 199, 232, 0.18);
  
  --text-primary: #F5F6FC;
  --text-secondary: #B1BAD6;
  --text-muted: #7A85A8;
  --border-subtle: #272F58;
  --border-input: #384277;
  --border-card-glow: rgba(100, 40, 245, 0.42);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 16px 40px -4px rgba(100, 40, 245, 0.28), 0 6px 18px rgba(0, 0, 0, 0.4);

  --status-success-bg: rgba(22, 163, 74, 0.22);
  --status-success-text: #86EFAC;
  --status-warning-bg: rgba(217, 119, 6, 0.22);
  --status-warning-text: #FCD34D;
  --status-error-bg: rgba(220, 38, 38, 0.22);
  --status-error-text: #FCA5A5;
  --status-info-bg: rgba(37, 99, 235, 0.22);
  --status-info-text: #93C5FD;
}