/**
 * Global Design Tokens — WealthPath Group
 * Apple iOS-inspired design system with glassmorphism, soft shadows, and premium typography.
 */

:root {
  /* ── Text ── */
  --color-text-primary:   #16253b;
  --color-text-secondary: #4f627d;
  --color-text-tertiary:  #7f90a8;
  --color-text-inverse:   #ffffff;

  /* ── Backgrounds ── */
  --color-bg-primary:   #f2f6fb;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary:  #e8f0f9;
  --color-bg-elevated:  #ffffff;
  --color-bg-glass:     rgba(255, 255, 255, 0.72);
  --color-bg-glass-strong: rgba(255, 255, 255, 0.88);

  /* ── Borders ── */
  --color-border:       #d2ddef;
  --color-border-light: #e5edf7;
  --color-border-focus: rgba(14, 116, 144, 0.6);

  /* ── Accent (Teal/Cyan) ── */
  --color-accent:       #0e7490;
  --color-accent-hover: #0a5f76;
  --color-accent-soft:  rgba(14, 116, 144, 0.10);
  --color-accent-rgb:   14, 116, 144;
  --color-on-accent:    #ffffff;

  /* ── Semantic Colors ── */
  --color-success:      #16a34a;
  --color-warning:      #d97706;
  --color-error:        #dc2626;

  /* ── Shadows ── */
  --color-shadow:       rgba(16, 35, 59, 0.12);
  --color-shadow-sm:    rgba(16, 35, 59, 0.06);
  --color-shadow-md:    rgba(16, 35, 59, 0.16);
  --color-shadow-lg:    rgba(16, 35, 59, 0.22);
  --color-shadow-colored: rgba(14, 116, 144, 0.18);

  /* ── Scrollbar ── */
  --color-scrollbar-bg:    #f2f6fb;
  --color-scrollbar-thumb: rgba(14, 116, 144, 0.5);

  /* ── SVG Theme ── */
  --svg-stroke:           var(--color-text-primary);
  --svg-fill:             var(--color-text-primary);
  --svg-fill-primary:     var(--color-text-primary);
  --svg-fill-secondary:   var(--color-text-secondary);
  --svg-fill-tertiary:    var(--color-text-tertiary);
  --svg-fill-accent:      var(--color-accent);
  --svg-filter-brightness: brightness(1);
  --svg-filter-contrast:   contrast(1);
  --svg-filter-invert:     invert(0);
  --svg-filter-combined:   brightness(1) contrast(1) invert(0);

  /* ── Typography ── */
  --font-family-base:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono:    "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   17px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  30px;
  --font-size-3xl:  38px;
  --font-line-height:      1.75;
  --font-line-height-tight: 1.3;
  --font-line-height-snug:  1.5;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border Radius ── */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* ── Blur ── */
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(24px);

  /* ── Motion ── */
  --transition-fast:    0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-duration: 0.45s;
  --transition-timing:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index ── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-sidebar: 1001;
  --z-modal:   1010;
  --z-toast:   1020;
}

/* ══════════════════════════════════════════════
   Dark Mode via media query (system preference)
══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary:   #e8f0fb;
    --color-text-secondary: #b8c7dd;
    --color-text-tertiary:  #8da0be;

    --color-bg-primary:   #0b1324;
    --color-bg-secondary: #111d32;
    --color-bg-tertiary:  #1a2943;
    --color-bg-elevated:  #162036;
    --color-bg-glass:     rgba(11, 19, 36, 0.72);
    --color-bg-glass-strong: rgba(11, 19, 36, 0.90);

    --color-border:       #2b3d5d;
    --color-border-light: #3a4f74;
    --color-border-focus: rgba(45, 212, 191, 0.5);

    --color-accent:       #2dd4bf;
    --color-accent-hover: #5eead4;
    --color-accent-soft:  rgba(45, 212, 191, 0.12);
    --color-accent-rgb:   45, 212, 191;
    --color-on-accent:    #05262b;

    --color-shadow:       rgba(0, 0, 0, 0.40);
    --color-shadow-sm:    rgba(0, 0, 0, 0.24);
    --color-shadow-md:    rgba(0, 0, 0, 0.50);
    --color-shadow-lg:    rgba(0, 0, 0, 0.65);
    --color-shadow-colored: rgba(45, 212, 191, 0.15);

    --color-scrollbar-bg:    #0b1324;
    --color-scrollbar-thumb: rgba(45, 212, 191, 0.45);

    --svg-filter-brightness: brightness(0.92);
    --svg-filter-contrast:   contrast(1.08);
    --svg-filter-combined:   brightness(0.92) contrast(1.08) invert(0);
  }
}

/* ══════════════════════════════════════════════
   Dark Mode via data-theme attribute (manual toggle)
══════════════════════════════════════════════ */
html[data-theme="dark"] {
  --color-text-primary:   #e8f0fb;
  --color-text-secondary: #b8c7dd;
  --color-text-tertiary:  #8da0be;

  --color-bg-primary:   #0b1324;
  --color-bg-secondary: #111d32;
  --color-bg-tertiary:  #1a2943;
  --color-bg-elevated:  #162036;
  --color-bg-glass:     rgba(11, 19, 36, 0.72);
  --color-bg-glass-strong: rgba(11, 19, 36, 0.90);

  --color-border:       #2b3d5d;
  --color-border-light: #3a4f74;
  --color-border-focus: rgba(45, 212, 191, 0.5);

  --color-accent:       #2dd4bf;
  --color-accent-hover: #5eead4;
  --color-accent-soft:  rgba(45, 212, 191, 0.12);
  --color-accent-rgb:   45, 212, 191;
  --color-on-accent:    #05262b;

  --color-shadow:       rgba(0, 0, 0, 0.40);
  --color-shadow-sm:    rgba(0, 0, 0, 0.24);
  --color-shadow-md:    rgba(0, 0, 0, 0.50);
  --color-shadow-lg:    rgba(0, 0, 0, 0.65);
  --color-shadow-colored: rgba(45, 212, 191, 0.15);

  --color-scrollbar-bg:    #0b1324;
  --color-scrollbar-thumb: rgba(45, 212, 191, 0.45);

  --svg-stroke:         var(--color-text-primary);
  --svg-fill:           var(--color-text-primary);
  --svg-fill-primary:   var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary:  var(--color-text-tertiary);
  --svg-fill-accent:    var(--color-accent);

  --svg-filter-brightness: brightness(0.92);
  --svg-filter-contrast:   contrast(1.08);
  --svg-filter-combined:   brightness(0.92) contrast(1.08) invert(0);
}

/* ══════════════════════════════════════════════
   Light Mode explicit override
══════════════════════════════════════════════ */
html[data-theme="light"] {
  --color-text-primary:   #16253b;
  --color-text-secondary: #4f627d;
  --color-text-tertiary:  #7f90a8;

  --color-bg-primary:   #f2f6fb;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary:  #e8f0f9;
  --color-bg-elevated:  #ffffff;
  --color-bg-glass:     rgba(255, 255, 255, 0.72);
  --color-bg-glass-strong: rgba(255, 255, 255, 0.88);

  --color-border:       #d2ddef;
  --color-border-light: #e5edf7;
  --color-border-focus: rgba(14, 116, 144, 0.6);

  --color-accent:       #0e7490;
  --color-accent-hover: #0a5f76;
  --color-accent-soft:  rgba(14, 116, 144, 0.10);
  --color-accent-rgb:   14, 116, 144;
  --color-on-accent:    #ffffff;

  --color-shadow:       rgba(16, 35, 59, 0.12);
  --color-shadow-sm:    rgba(16, 35, 59, 0.06);
  --color-shadow-md:    rgba(16, 35, 59, 0.16);
  --color-shadow-lg:    rgba(16, 35, 59, 0.22);
  --color-shadow-colored: rgba(14, 116, 144, 0.18);

  --color-scrollbar-bg:    #f2f6fb;
  --color-scrollbar-thumb: rgba(14, 116, 144, 0.5);

  --svg-stroke:         var(--color-text-primary);
  --svg-fill:           var(--color-text-primary);
  --svg-fill-primary:   var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary:  var(--color-text-tertiary);
  --svg-fill-accent:    var(--color-accent);

  --svg-filter-brightness: brightness(1);
  --svg-filter-contrast:   contrast(1);
  --svg-filter-combined:   brightness(1) contrast(1) invert(0);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0.01ms;
    --transition-base:   0.01ms;
    --transition-slow:   0.01ms;
    --transition-spring: 0.01ms;
    --transition-duration: 0.01ms;
  }
}