/**
 * ALS Broker CRM — unified design tokens (single source of truth)
 *
 * Fintech palette: blue/violet brand, emerald success, amber warning, red danger,
 * slate neutrals. Use only these variables in templates and components—avoid
 * hardcoded hex/rgba except in this file.
 *
 * Ionic / Capacitor: mirror the :root block (or import this file as global CSS)
 * so mobile matches web.
 */

:root {
  /* ---- RGB channels (for rgba(..., a) and color-mix) ---- */
  --rgb-primary: 59, 130, 246;
  --rgb-secondary: 139, 92, 246;
  --rgb-success: 16, 185, 129;
  --rgb-warning: 245, 158, 11;
  --rgb-danger: 239, 68, 68;
  --rgb-muted: 148, 163, 184;

  /* ---- Core palette ---- */
  --palette-primary: #3b82f6;
  --palette-primary-dark: #2563eb;
  --palette-primary-light: #60a5fa;
  --palette-secondary: #8b5cf6;
  --palette-secondary-dark: #7c3aed;
  --palette-secondary-light: #a78bfa;
  --palette-success: #10b981;
  --palette-success-dark: #059669;
  --palette-warning: #f59e0b;
  --palette-warning-dark: #d97706;
  --palette-danger: #ef4444;
  --palette-danger-dark: #dc2626;

  /* ---- Product semantic names (use in new CSS) ---- */
  --color-primary: var(--palette-primary);
  --color-secondary: var(--palette-secondary);
  --color-success: var(--palette-success);
  --color-danger: var(--palette-danger);
  --color-warning: var(--palette-warning);
  --color-info: var(--palette-primary);
  --color-background: #0a0e1a;
  --color-surface-1: #0b1020;
  --color-surface-2: #111827;
  --color-text: #f9fafb;
  --color-text-muted: #9ca3af;
  --color-on-emphasis: #ffffff;

  /* ---- Soft surfaces (badges, chips, status rows) ---- */
  --color-primary-soft: rgba(var(--rgb-primary), 0.12);
  --color-primary-soft-border: rgba(var(--rgb-primary), 0.28);
  --color-secondary-soft: rgba(var(--rgb-secondary), 0.15);
  --color-secondary-soft-border: rgba(var(--rgb-secondary), 0.3);
  --color-success-soft: rgba(var(--rgb-success), 0.12);
  --color-success-soft-border: rgba(var(--rgb-success), 0.25);
  --color-warning-soft: rgba(var(--rgb-warning), 0.12);
  --color-warning-soft-border: rgba(var(--rgb-warning), 0.25);
  --color-danger-soft: rgba(var(--rgb-danger), 0.12);
  --color-danger-soft-border: rgba(var(--rgb-danger), 0.28);
  --color-muted-soft: rgba(var(--rgb-muted), 0.15);
  --color-muted-soft-border: rgba(var(--rgb-muted), 0.3);

  /* ---- Focus / glow (accessible contrast on dark UI) ---- */
  --focus-ring-color: rgba(var(--rgb-primary), 0.28);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);

  /* ---- Brand gradients ---- */
  --gradient-brand: linear-gradient(135deg, var(--palette-primary) 0%, var(--palette-secondary) 100%);
  --gradient-brand-reverse: linear-gradient(135deg, var(--palette-secondary) 0%, var(--palette-primary) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(var(--rgb-primary), 0.2) 0%, rgba(var(--rgb-secondary), 0.12) 100%);
  --gradient-success: linear-gradient(135deg, var(--palette-success) 0%, var(--palette-success-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--palette-danger) 0%, var(--palette-danger-dark) 100%);
  --gradient-warning: linear-gradient(135deg, var(--palette-warning) 0%, var(--palette-warning-dark) 100%);

  /* ---- Legacy CRM layout (templates/base.html) ---- */
  --color-bg: var(--color-background);
  --color-text-main: var(--color-text);
  --color-border: #1f2933;
  --color-divider: rgba(var(--rgb-muted), 0.18);
  --color-accent: var(--palette-primary-light);

  /* ---- Portal / landing aliases (backward compatible) ---- */
  --brand-blue: var(--palette-primary);
  --brand-blue-dark: var(--palette-primary-dark);
  --brand-blue-light: var(--palette-primary-light);
  --brand-purple: var(--palette-secondary);
  --brand-purple-dark: var(--palette-secondary-dark);
  --brand-purple-light: var(--palette-secondary-light);
  --accent: var(--palette-success);
  --accent-orange: var(--palette-warning);
  --accent-red: var(--palette-danger);
  --accent-success: var(--palette-success);
  --accent-success-light: #34d399;
  --accent-danger: var(--palette-danger);
  --accent-danger-light: #f87171;
  --accent-warning: var(--palette-warning);
  --accent-warning-light: #fbbf24;
  --accent-info: var(--palette-primary);
  --accent-info-light: var(--palette-primary-light);
  --primary: var(--palette-primary);
  --primary-dark: var(--palette-primary-dark);
  --secondary: var(--palette-secondary);

  /* ---- Marketing / light landing (landing/base.html) ---- */
  --color-landing-heading: #0f172a;
  --color-landing-body: #1f2937;
  --color-landing-muted: #6b7280;
  --color-landing-border: #e5e7eb;
  --color-landing-bg: #ffffff;
  --color-landing-bg-subtle: #f9fafb;
  /* Auth / standalone login shells */
  --color-auth-canvas: #eef2f7;
  --color-auth-text: #1e293b;

  /* ---- Radius & spacing (shared) ---- */
  --radius-card: 16px;
  --radius-button: 999px;
  --radius-input: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --content-max-width: 1440px;
  --topbar-height: 64px;
  --sidebar-width: 260px;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-ar: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;

  --shadow-elevated: 0 18px 45px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 16px rgba(var(--rgb-primary), 0.35);

  /* ---- Bootstrap 5.3 semantic bridge (employee portal) ---- */
  --bs-primary: var(--palette-primary);
  --bs-secondary: var(--palette-secondary);
  --bs-success: var(--palette-success);
  --bs-danger: var(--palette-danger);
  --bs-warning: var(--palette-warning);
  --bs-info: var(--palette-primary);
  --bs-primary-rgb: var(--rgb-primary);
  --bs-secondary-rgb: var(--rgb-secondary);
  --bs-success-rgb: var(--rgb-success);
  --bs-danger-rgb: var(--rgb-danger);
  --bs-warning-rgb: var(--rgb-warning);
  --bs-info-rgb: var(--rgb-primary);
}

/* Utility classes (legacy + emails referencing theme.css) */
.gradient-brand-1 {
  background: var(--gradient-brand);
}

.gradient-brand-2 {
  background: var(--gradient-brand-soft);
}

.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}