/**
 * RocketBank Design System - Design Tokens & Variables
 * Adapted from TemplateMo 623 NovaPay (https://templatemo.com)
 *
 * Core Color System: Dark slate base (#0F1319) with Sky-blue accent (#4A9EE8)
 * Display Typography: Outfit (geometric, financial authority)
 * Body Typography: DM Sans (clean, legible fintech UI)
 * Motion: --silk cubic-bezier(0.16, 1, 0.3, 1)
 */

:root {
  /* ── TemplateMo 623 NovaPay Base Variables ── */
  --bg: #0F1319;
  --bg2: #141920;
  --bg3: #1A2130;
  --bg4: #1E2838;
  --sky: #4A9EE8;
  --sky2: #7EC8F0;
  --sky3: #2A6AAA;
  --sky4: #0D2A44;
  --text: #E4EEF8;
  --text2: #8AAEC8;
  --text3: #506070;
  --border: #1E3050;
  --border2: #2A4060;
  --green: #3DCC8E;
  --red: #E85A5A;
  --nav-h: 68px;
  --silk: cubic-bezier(0.16, 1, 0.3, 1);
  --silk-fast: cubic-bezier(0.25, 1, 0.4, 1);
  --max-w: 1280px;

  /* ── Application Brand Mapping ── */
  --color-primary: var(--sky);
  --color-primary-hover: var(--sky2);
  --color-primary-active: var(--sky3);
  --color-primary-light: rgba(74, 158, 232, 0.15);
  --color-primary-dark: var(--sky4);
  --color-secondary: var(--green);
  --color-secondary-hover: #50d69b;
  --color-accent: #8888F8;
  --color-accent-light: rgba(136, 136, 248, 0.15);

  /* ── Neutrals & Surfaces (Default: Dark Slate NovaPay) ── */
  --bg-body: var(--bg);
  --bg-surface: var(--bg2);
  --bg-card: var(--bg2);
  --bg-subtle: var(--bg3);
  --bg-elevated: var(--bg3);
  --bg-input: var(--bg2);
  --border-color: var(--border);
  --border-color-focus: var(--sky);
  --border-color-subtle: rgba(30, 48, 80, 0.6);

  /* ── Typography Colors ── */
  --text-primary: var(--text);
  --text-secondary: var(--text2);
  --text-muted: var(--text3);
  --text-inverse: #0A1A2C;
  --text-link: var(--sky);

  /* ── Status Colors ── */
  --color-success: var(--green);
  --color-success-bg: rgba(61, 204, 142, 0.12);
  --color-success-border: rgba(61, 204, 142, 0.25);
  --color-success-text: var(--green);

  --color-warning: #F0A030;
  --color-warning-bg: rgba(240, 160, 48, 0.12);
  --color-warning-border: rgba(240, 160, 48, 0.25);
  --color-warning-text: #F0A030;

  --color-danger: var(--red);
  --color-danger-bg: rgba(232, 90, 90, 0.12);
  --color-danger-border: rgba(232, 90, 90, 0.25);
  --color-danger-text: var(--red);

  --color-info: var(--sky);
  --color-info-bg: rgba(74, 158, 232, 0.12);
  --color-info-border: rgba(74, 158, 232, 0.25);
  --color-info-text: var(--sky);

  /* ── Spacing Scale ── */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* ── Border Radii ── */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Elevation & Shadows ── */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px 0 rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 48px 0 rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px rgba(74, 158, 232, 0.25);

  /* ── Typography Families & Scales ── */
  --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display: 'Outfit', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --font-size-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);

  /* ── Layout Dimensions ── */
  --header-height: 4.25rem;
  --sidebar-width: 17.5rem;
  --sidebar-collapsed-width: 5rem;
  --container-max-width: 1280px;

  /* ── Transitions ── */
  --transition-fast: 200ms var(--silk);
  --transition-base: 400ms var(--silk);
  --transition-slow: 700ms var(--silk);

  /* ── Z-Index Hierarchy ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ──────────────────────────────────────────────
   Light Theme Override (Clean NovaPay Contrast)
   ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #F8FAFC;
  --bg2: #FFFFFF;
  --bg3: #EDF2F7;
  --bg4: #E2E8F0;
  --sky: #0284C7;
  --sky2: #0369A1;
  --sky3: #075985;
  --sky4: #E0F2FE;
  --text: #0F172A;
  --text2: #334155;
  --text3: #64748B;
  --border: #E2E8F0;
  --border2: #CBD5E1;
  --green: #10B981;
  --red: #EF4444;

  --color-primary: var(--sky);
  --color-primary-hover: var(--sky2);
  --color-primary-active: var(--sky3);
  --color-primary-light: var(--sky4);
  --color-primary-dark: #075985;

  --bg-body: var(--bg);
  --bg-surface: var(--bg2);
  --bg-card: var(--bg2);
  --bg-subtle: var(--bg3);
  --bg-elevated: #FFFFFF;
  --bg-input: #FFFFFF;
  --border-color: var(--border);
  --border-color-focus: var(--sky);
  --border-color-subtle: var(--border);

  --text-primary: var(--text);
  --text-secondary: var(--text2);
  --text-muted: var(--text3);
  --text-inverse: #FFFFFF;
  --text-link: var(--sky);

  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-success-border: rgba(16, 185, 129, 0.25);
  --color-success-text: #059669;

  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-warning-border: rgba(245, 158, 11, 0.25);
  --color-warning-text: #D97706;

  --color-danger-bg: rgba(239, 68, 68, 0.1);
  --color-danger-border: rgba(239, 68, 68, 0.25);
  --color-danger-text: #DC2626;

  --color-info-bg: rgba(2, 132, 199, 0.1);
  --color-info-border: rgba(2, 132, 199, 0.25);
  --color-info-text: #0284C7;

  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px 0 rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 24px 0 rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 36px 0 rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 20px rgba(2, 132, 199, 0.2);
}