/**
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  ScalifyPro Design System v3 — RADICAL FUTURISTIC EDITION      ║
 * ║  Brand: #28A5AC · Dark-first · Glass · Depth · Neon            ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */

/* ─────────────── FONT IMPORT ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ══════ BRAND CORE ══════ */
  --brand: #28A5AC;
  --brand-hover: #23949A;
  --brand-active: #1E7F84;
  --brand-muted: #D6F2F3;
  --brand-rgb: 40, 165, 172;

  /* ══════ BRAND GLOW SYSTEM ══════ */
  --glow-xs: 0 0 8px rgba(var(--brand-rgb), 0.15);
  --glow-sm: 0 0 16px rgba(var(--brand-rgb), 0.2);
  --glow-md: 0 0 32px rgba(var(--brand-rgb), 0.25);
  --glow-lg: 0 0 60px rgba(var(--brand-rgb), 0.2);
  --glow-xl: 0 0 100px rgba(var(--brand-rgb), 0.15);
  --glow-neon: 0 0 20px rgba(var(--brand-rgb), 0.5), 0 0 60px rgba(var(--brand-rgb), 0.2);
  --glow-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.25);

  /* ══════ PALETTE — LIGHT (default) ══════ */
  --c-bg-0: #F4F7FA;           /* canvas */
  --c-bg-1: #FFFFFF;           /* card / surface */
  --c-bg-2: #F8FAFB;           /* recessed */
  --c-bg-3: #EEF2F6;           /* inset / well */
  --c-bg-float: rgba(255, 255, 255, 0.92);

  --c-text-0: #0C1222;         /* heading */
  --c-text-1: #1E293B;         /* body */
  --c-text-2: #475569;         /* secondary */
  --c-text-3: #94A3B8;         /* muted / placeholder */
  --c-text-inv: #FFFFFF;       /* on brand / on dark */

  --c-line-0: #E8ECF1;         /* border default */
  --c-line-1: #F1F5F9;         /* border subtle */
  --c-line-2: #CBD5E1;         /* border strong */
  --c-line-brand: rgba(var(--brand-rgb), 0.25);

  /* ══════ SEMANTIC ══════ */
  --c-ok: #10B981;
  --c-ok-bg: rgba(16, 185, 129, 0.1);
  --c-ok-glow: 0 0 12px rgba(16, 185, 129, 0.3);
  --c-err: #EF4444;
  --c-err-bg: rgba(239, 68, 68, 0.08);
  --c-err-glow: 0 0 12px rgba(239, 68, 68, 0.3);
  --c-warn: #F59E0B;
  --c-warn-bg: rgba(245, 158, 11, 0.08);
  --c-warn-glow: 0 0 12px rgba(245, 158, 11, 0.3);

  /* ══════ GLASS ══════ */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-thick: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-blur: 24px;

  /* ══════ DEPTH (layered shadow system) ══════ */
  --depth-0: none;
  --depth-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --depth-2: 0 4px 16px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.03);
  --depth-3: 0 10px 40px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
  --depth-4: 0 20px 60px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.05);
  --depth-5: 0 32px 80px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.06);
  --depth-brand: 0 8px 30px rgba(var(--brand-rgb), 0.2);
  --depth-brand-heavy: 0 12px 48px rgba(var(--brand-rgb), 0.3);
  --depth-inset: inset 0 2px 4px rgba(0,0,0,0.04);
  --depth-focus: var(--glow-ring), var(--glow-sm);

  /* ══════ RADIUS ══════ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* ══════ SPACING (4px base) ══════ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-7: 28px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ══════ TYPOGRAPHY ══════ */
  --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --fs-xs: 11px;  --fs-sm: 13px;  --fs-base: 15px;
  --fs-md: 16px;  --fs-lg: 18px;
  --fs-h3: 22px;  --fs-h2: 28px;  --fs-h1: 42px;
  --fs-stat: 28px; --fs-stat-lg: 36px;
  --fw-normal: 400; --fw-medium: 500;
  --fw-semi: 600;  --fw-bold: 700;  --fw-black: 800;
  --lh-tight: 1.15; --lh-base: 1.6; --lh-loose: 1.7;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em;

  /* ══════ MOTION ══════ */
  --t-instant: 80ms;  --t-fast: 150ms;
  --t-base: 200ms;    --t-slow: 300ms;
  --t-dramatic: 500ms; --t-counter: 800ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.2, 0.27, 1.2);

  /* ══════ COMPONENTS ══════ */
  --header-h: 64px;
  --sidebar-w: 260px;
  --sidebar-w-min: 75px;
  --card-pad: 24px;
  --card-pad-m: 16px;
  --input-h: 44px;
  --input-h-sm: 36px;
  --input-h-lg: 52px;
  --table-row-h: 52px;
  --btn-h: 40px;
  --btn-h-sm: 32px;
  --btn-h-lg: 48px;

  /* ══════ Z-INDEX ══════ */
  --z-hide: -1;
  --z-base: 0;
  --z-float: 10;
  --z-sticky: 50;
  --z-sidebar: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ══════ LEGACY COMPAT ══════ */
  --primary: var(--brand);
  --primary-dark: var(--brand-active);
  --blue: var(--brand);
  --link-color: var(--brand);
  --white: #FFFFFF;
  --brand-primary: var(--brand);
  --brand-primary-hover: var(--brand-hover);
  --brand-primary-active: var(--brand-active);
  --brand-primary-light: var(--brand-muted);
  --neutral-0: var(--c-bg-1);
  --neutral-50: var(--c-bg-2);
  --neutral-100: var(--c-bg-3);
  --neutral-200: var(--c-line-0);
  --neutral-300: var(--c-line-2);
  --neutral-500: var(--c-text-2);
  --neutral-700: var(--c-text-1);
  --neutral-900: var(--c-text-0);
  --bg-primary: var(--c-bg-1);
  --bg-secondary: var(--c-bg-0);
  --bg-tertiary: var(--c-bg-3);
  --bg-elevated: var(--c-bg-1);
  --text-primary: var(--c-text-0);
  --text-secondary: var(--c-text-2);
  --text-muted: var(--c-text-3);
  --text-inverse: var(--c-text-inv);
  --text-on-brand: var(--c-text-inv);
  --border-default: var(--c-line-0);
  --border-subtle: var(--c-line-1);
  --border-strong: var(--c-line-2);
  --success-500: var(--c-ok);
  --success-bg: var(--c-ok-bg);
  --error-500: var(--c-err);
  --error-bg: var(--c-err-bg);
  --warning-500: var(--c-warn);
  --warning-bg: var(--c-warn-bg);
  --shadow-soft: var(--depth-2);
  --shadow-medium: var(--depth-3);
  --shadow-focus: var(--depth-focus);
  --shadow-brand-hover: var(--depth-brand);
  --shadow-glow: var(--glow-lg);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --font-primary: var(--ff);
  --radius-xs: var(--r-xs);
  --radius-pill: var(--r-full);
  --glass-bg-heavy: var(--glass-bg-thick);
  --bg-surface-frosted: var(--c-bg-1);
  --bg-canvas: var(--c-bg-0);
  --shadow-card-hover: var(--depth-3);
  --border-glow: var(--c-line-brand);
  --input-height: var(--input-h);
  --font-body: var(--fs-base);
  --btn-primary-weight: var(--fw-semi);
  --motion-dramatic: var(--t-dramatic);
  --font-body-sm: var(--fs-sm);
  --space-4: var(--s-1); --space-8: var(--s-2); --space-12: var(--s-3);
  --space-16: var(--s-4); --space-20: var(--s-5); --space-24: var(--s-6);
  --space-32: var(--s-8); --space-40: var(--s-10); --space-48: var(--s-12);
  --space-64: var(--s-16); --space-80: var(--s-20);
  --motion-fast: var(--t-fast); --motion-base: var(--t-base);
  --motion-slow: var(--t-slow); --motion-counter: var(--t-counter);
  --ease-standard: var(--ease);
}

/* ══════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════ */
[data-theme="dark"],
.dark-mode,
html[data-theme="dark"] {
  /* Dark mode brand tuning */
  --brand: #0e4a4e;
  --brand-hover: #136066;
  --brand-active: #0b3b3e;
  --brand-rgb: 14, 74, 78;
  --brand-muted: #c7e5e7;

  --c-bg-0: #060B18;
  --c-bg-1: #0D1424;
  --c-bg-2: #111B30;
  --c-bg-3: #162038;
  --c-bg-float: rgba(13, 20, 36, 0.95);

  --c-text-0: #FFFFFF;
  --c-text-1: #F1F5F9;
  --c-text-2: #E2E8F0;
  --c-text-3: #CBD5E1;

  --c-line-0: rgba(var(--brand-rgb), 0.12);
  --c-line-1: rgba(255, 255, 255, 0.04);
  --c-line-2: rgba(var(--brand-rgb), 0.22);
  --c-line-brand: rgba(var(--brand-rgb), 0.35);

  --glass-bg: rgba(13, 20, 36, 0.65);
  --glass-bg-thick: rgba(13, 20, 36, 0.88);
  --glass-border: rgba(var(--brand-rgb), 0.1);

  --depth-1: 0 1px 3px rgba(0,0,0,0.3);
  --depth-2: 0 4px 20px rgba(0,0,0,0.35), 0 0 1px rgba(var(--brand-rgb), 0.08);
  --depth-3: 0 10px 40px rgba(0,0,0,0.4), 0 0 2px rgba(var(--brand-rgb), 0.1);
  --depth-4: 0 20px 60px rgba(0,0,0,0.45), 0 0 30px rgba(var(--brand-rgb), 0.08);
  --depth-5: 0 32px 80px rgba(0,0,0,0.5), 0 0 60px rgba(var(--brand-rgb), 0.1);
  --depth-brand: 0 8px 26px rgba(var(--brand-rgb), 0.22), 0 0 1px rgba(var(--brand-rgb), 0.14);
  --depth-focus: 0 0 0 3px rgba(var(--brand-rgb), 0.25), 0 0 20px rgba(var(--brand-rgb), 0.1);
  --glow-sm: 0 0 16px rgba(var(--brand-rgb), 0.2);
  --glow-md: 0 0 28px rgba(var(--brand-rgb), 0.2);
  --glow-neon: 0 0 16px rgba(var(--brand-rgb), 0.35), 0 0 48px rgba(var(--brand-rgb), 0.12);

  --c-ok-bg: rgba(16, 185, 129, 0.12);
  --c-err-bg: rgba(239, 68, 68, 0.1);
  --c-warn-bg: rgba(245, 158, 11, 0.1);

  --c-line-0: rgba(var(--brand-rgb), 0.1);
  --c-line-2: rgba(var(--brand-rgb), 0.18);
  --c-line-brand: rgba(var(--brand-rgb), 0.28);

  --brand-primary: #0e4a4e;
  --brand-primary-hover: #136066;
  --brand-primary-active: #0b3b3e;
  --primary: #0e4a4e;
  --primary-dark: #0b3b3e;
  --blue: #0e4a4e;
  --link-color: #0e4a4e;
}

html[data-theme="dark"] body { background: var(--c-bg-0) !important; }

/* ══════ RESPONSIVE OVERRIDES ══════ */
@media (max-width: 767px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-stat-lg: 32px;
    --card-pad: var(--card-pad-m);
    --header-h: 56px;
  }
}