:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --font-body: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --font-display: "Outfit", "Plus Jakarta Sans", sans-serif;

  --bg-deep: #030206;
  --bg-app: #0e0c15;
  --bg-panel: rgba(18, 15, 26, 0.72);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.07);
  --bg-glass-hover: rgba(255, 255, 255, 0.1);
  --bg-elevated: rgba(32, 27, 46, 0.55);
  --bg-input: rgba(14, 11, 22, 0.92);

  --text: #f6f4fa;
  --text-soft: #d6cfe3;
  --muted: #a699c2;
  --muted-dim: rgba(166, 153, 194, 0.55);

  --accent: #ff6b35;
  --accent-light: #ffa800;
  --accent-soft: rgba(255, 107, 53, 0.16);
  --blue: #00f0ff;
  --purple: #ff3366;
  --indigo: #ff753a;
  --pink: #ff3366;
  --success: #22c55e;
  --warning: #ffb703;
  --danger: #f43f5e;

  --neon-pink: #ff3366;
  --neon-cyan: #00f0ff;
  --neon-purple: #ff6b35;

  --glow-pink: 0 0 20px rgba(255, 51, 102, 0.35);
  --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.35);
  --glow-purple: 0 8px 30px rgba(255, 107, 53, 0.45);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 107, 53, 0.4);
  --border-strong: rgba(255, 107, 53, 0.45);
  --border-neon: rgba(255, 168, 0, 0.25);

  --nav-bg: rgba(5, 4, 9, 0.4);
  --nav-bg-scrolled: rgba(5, 4, 9, 0.85);
  --ambient-overlay: linear-gradient(180deg, rgba(5, 4, 9, 0.2) 0%, rgba(5, 4, 9, 0.85) 60%, #050409 100%);
  --ambient-blur-strength: 50px;
  --hero-title-gradient: linear-gradient(135deg, #ffffff 10%, #ffd0bc 60%, #ff6b35 120%);
  --btn-primary-bg: linear-gradient(135deg, #ff3366 0%, #ff6b35 50%, #ffa800 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 8px 32px rgba(255, 107, 53, 0.4);
  --btn-primary-hover-shadow: 0 12px 40px rgba(255, 107, 53, 0.6), 0 0 20px rgba(255, 168, 0, 0.25);
  --glass-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --field-bg: rgba(255, 255, 255, 0.03);
  --field-focus-bg: rgba(255, 255, 255, 0.06);
  --field-focus-border: rgba(255, 107, 53, 0.55);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 107, 53, 0.25);

  --nav-height: 64px;
  --sidebar-width: 260px;

  /* Animation & Transition Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinematic: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease-out);
  --transition-smooth: 0.3s var(--ease-out);
  --transition-bounce: 0.4s var(--ease-spring);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg-deep: #eae7ee;
  --bg-app: #f2eff6;
  --bg-panel: rgba(255, 255, 255, 0.72);
  --bg-glass: rgba(255, 255, 255, 0.55);
  --bg-glass-strong: rgba(255, 255, 255, 0.82);
  --bg-glass-hover: rgba(255, 255, 255, 0.95);
  --bg-elevated: rgba(255, 255, 255, 0.88);
  --bg-input: rgba(255, 255, 255, 0.92);

  --text: #1b1725;
  --text-soft: #4b415a;
  --muted: #7b728b;
  --muted-dim: rgba(123, 114, 139, 0.75);

  --accent: #e65100;
  --accent-light: #ff6b35;
  --accent-soft: rgba(255, 107, 53, 0.12);
  --blue: #0087a3;
  --purple: #d81b60;
  --indigo: #f4511e;
  --pink: #e91e63;
  --success: #0f9d6b;
  --warning: #d97706;
  --danger: #e11d48;

  --border: rgba(255, 107, 53, 0.16);
  --border-hover: rgba(230, 81, 0, 0.35);
  --border-strong: rgba(230, 81, 0, 0.28);

  --nav-bg: rgba(242, 239, 246, 0.65);
  --nav-bg-scrolled: rgba(242, 239, 246, 0.92);
  --ambient-overlay: linear-gradient(180deg, rgba(242, 239, 246, 0.18) 0%, rgba(234, 231, 238, 0.42) 72%, rgba(234, 231, 238, 0.55) 100%);
  --ambient-blur-strength: 28px;
  --hero-title-gradient: linear-gradient(180deg, #1b1725 0%, #1b1725 50%, #4b415a 100%);
  --btn-primary-bg: linear-gradient(135deg, #1b1725 0%, #312744 100%);
  --btn-primary-text: #f6f4fa;
  --btn-primary-shadow: 0 12px 32px rgba(27, 23, 37, 0.18);
  --btn-primary-hover-shadow: 0 16px 40px rgba(27, 23, 37, 0.28);
  --glass-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  --field-bg: rgba(255, 255, 255, 0.88);
  --field-focus-bg: #ffffff;
  --field-focus-border: rgba(255, 107, 53, 0.35);

  --shadow-panel: 0 20px 60px rgba(75, 60, 100, 0.1);
  --shadow-card-hover: 0 20px 50px rgba(75, 60, 100, 0.15);
}

/* ── Studio Obsidian & Liquid Smoke Design System (Strictly Scoped to .client-page) ── */
.client-page {
  --obsidian-base: #060709;
  --obsidian-surface: #0b0e14;
  --obsidian-surface-elevated: #111620;
  --obsidian-surface-hover: #161c28;

  --obsidian-glass: rgba(10, 12, 16, 0.82);
  --obsidian-glass-heavy: rgba(8, 10, 14, 0.92);
  --obsidian-glass-hover: rgba(14, 18, 24, 0.88);
  --obsidian-glass-tint: rgba(18, 24, 34, 0.76);

  --obsidian-border: rgba(255, 255, 255, 0.08);
  --obsidian-border-subtle: rgba(255, 255, 255, 0.05);
  --obsidian-border-hover: rgba(56, 189, 248, 0.35);
  --obsidian-border-specular: rgba(255, 255, 255, 0.14);

  --obsidian-specular: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --obsidian-specular-strong: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --obsidian-shadow-card: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
  --obsidian-shadow-hover: 0 24px 50px -10px rgba(0, 0, 0, 0.85), 0 0 24px rgba(56, 189, 248, 0.12);

  --obsidian-blur: none;
  --obsidian-blur-deep: none;

  --obsidian-text: #f8fafc;
  --obsidian-text-soft: #cbd5e1;
  --obsidian-text-muted: #94a3b8;
  --obsidian-text-dim: #64748b;

  --obsidian-cyan: #38bdf8;
  --obsidian-cyan-soft: rgba(56, 189, 248, 0.12);
  --obsidian-cyan-border: rgba(56, 189, 248, 0.28);
  --obsidian-cyan-glow: 0 0 20px rgba(56, 189, 248, 0.25);

  --obsidian-titanium: #e2e8f0;
  --obsidian-titanium-soft: rgba(226, 232, 240, 0.08);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Overriding standard theme variables inside .client-page */
  --bg-deep: #060709;
  --bg-app: #0b0e14;
  --bg-panel: rgba(10, 12, 16, 0.82);
  --bg-glass: rgba(10, 12, 16, 0.82);
  --bg-glass-strong: rgba(10, 12, 16, 0.92);
  --bg-glass-hover: rgba(14, 18, 24, 0.88);
  --bg-elevated: #111620;
  --bg-input: rgba(10, 12, 16, 0.9);

  --text: #f8fafc;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --muted-dim: rgba(148, 163, 184, 0.6);

  --accent: #38bdf8;
  --accent-light: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.12);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(56, 189, 248, 0.35);
  --border-strong: rgba(255, 255, 255, 0.14);

  --glass-card-bg: rgba(10, 12, 16, 0.82);
  --glass-card-border: rgba(255, 255, 255, 0.08);
  --glass-card-border-hover: rgba(56, 189, 248, 0.35);
  --glass-card-glow: 0 0 24px rgba(56, 189, 248, 0.1);
  --spotlight-color: rgba(56, 189, 248, 0.08);

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #060709;
  --btn-primary-shadow: 0 4px 16px rgba(255, 255, 255, 0.12);
  --btn-primary-hover-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}