/* ===========================================================
   ZenTrack Design Tokens
   Single source of truth: colors, spacing, typography, radius
   =========================================================== */

:root {
  /* ---- Brand palette (light mode) ---- */
  --color-primary:        #4F46E5;     /* Indigo-600 — app accent */
  --color-primary-50:     #EEF2FF;
  --color-primary-100:    #E0E7FF;
  --color-primary-200:    #C7D2FE;
  --color-primary-300:    #A5B4FC;
  --color-primary-400:    #818CF8;
  --color-primary-500:    #6366F1;
  --color-primary-600:    #4F46E5;
  --color-primary-700:    #4338CA;
  --color-primary-800:    #3730A3;
  --color-primary-900:    #312E81;

  --color-accent:         #92D350;     /* Brand green — income */
  --color-accent-soft:    #E8F5D5;
  --color-accent-dark:    #6CB02C;

  /* ---- Semantic colors (matches app) ---- */
  --color-red:            #EF4444;
  --color-red-soft:       #FEE2E2;
  --color-orange:         #F97316;
  --color-orange-soft:    #FFEDD5;
  --color-blue:           #3B82F6;
  --color-blue-soft:      #DBEAFE;
  --color-violet:         #8B5CF6;
  --color-violet-soft:    #EDE9FE;

  /* ---- Neutrals ---- */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #FAFAFB;
  --color-bg-soft:        #F4F4F7;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F8F8FB;
  --color-border:         #E5E7EB;
  --color-border-soft:    rgba(229, 231, 235, 0.6);
  --color-border-strong:  #D1D5DB;

  --color-text:           #0A0A0F;
  --color-text-muted:     #6B7280;
  --color-text-soft:      #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  /* ---- Gradients (signature ZenTrack) ---- */
  --grad-hero: radial-gradient(circle at 20% 0%, rgba(79, 70, 229, 0.18), transparent 50%),
               radial-gradient(circle at 80% 30%, rgba(146, 211, 80, 0.15), transparent 50%),
               radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.12), transparent 60%);
  --grad-primary: linear-gradient(135deg, #6366F1 0%, #4F46E5 50%, #4338CA 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(146, 211, 80, 0.08));
  --grad-accent: linear-gradient(135deg, #B6E489 0%, #92D350 50%, #6CB02C 100%);
  --grad-text: linear-gradient(135deg, #0A0A0F 0%, #4F46E5 100%);
  --grad-shine: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);

  /* ---- Typography ---- */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    21px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   clamp(36px, 4.6vw, 56px);
  --fs-5xl:   clamp(44px, 6.2vw, 78px);
  --fs-6xl:   clamp(54px, 8vw, 104px);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-widest: 0.14em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- Spacing scale (4px base, 1.5x growth) ---- */
  --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;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;

  /* ---- Layout ---- */
  --container:    1200px;
  --container-sm: 880px;
  --container-xs: 680px;
  --gutter:       24px;
  --gutter-lg:    48px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 9999px;

  /* ---- Shadows (layered, with primary tint) ---- */
  --shadow-xs:  0 1px 2px rgba(10, 10, 15, 0.04);
  --shadow-sm:  0 2px 4px rgba(10, 10, 15, 0.04), 0 1px 2px rgba(10, 10, 15, 0.06);
  --shadow:     0 4px 12px rgba(10, 10, 15, 0.06), 0 2px 4px rgba(10, 10, 15, 0.04);
  --shadow-md:  0 12px 32px rgba(10, 10, 15, 0.08), 0 4px 8px rgba(10, 10, 15, 0.04);
  --shadow-lg:  0 24px 64px rgba(10, 10, 15, 0.12), 0 8px 16px rgba(10, 10, 15, 0.06);
  --shadow-xl:  0 40px 80px rgba(10, 10, 15, 0.18), 0 16px 32px rgba(10, 10, 15, 0.08);
  --shadow-glow:    0 0 0 1px rgba(79, 70, 229, 0.10), 0 12px 32px rgba(79, 70, 229, 0.18);
  --shadow-glow-lg: 0 0 0 1px rgba(79, 70, 229, 0.10), 0 32px 64px -16px rgba(79, 70, 229, 0.30);

  /* ---- Motion ---- */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   160ms;
  --duration:        240ms;
  --duration-slow:   480ms;
  --duration-slower: 800ms;

  /* ---- Z-index scale ---- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     900;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ---- Layout chrome ---- */
  --nav-h:        72px;
  --nav-h-mobile: 64px;
}

/* ===========================================================
   Dark mode (auto + manual toggle)
   =========================================================== */
[data-theme="dark"] {
  --color-bg:             #08080C;
  --color-bg-alt:         #0F0F16;
  --color-bg-soft:        #15151E;
  --color-surface:        #11111A;
  --color-surface-2:      #1A1A26;
  --color-border:         #25252F;
  --color-border-soft:    rgba(37, 37, 47, 0.6);
  --color-border-strong:  #34343F;

  --color-text:           #F4F4F7;
  --color-text-muted:     #A1A1AA;
  --color-text-soft:      #71717A;
  --color-text-inverse:   #08080C;

  --color-primary:        #818CF8;
  --color-primary-50:     #1A1A2E;
  --color-primary-100:    #232348;
  --color-primary-200:    #2D2D5C;
  --color-primary-700:    #A5B4FC;
  --color-primary-800:    #C7D2FE;
  --color-primary-900:    #E0E7FF;

  --color-accent:         #B6E489;
  --color-accent-soft:    #2A3A1A;
  --color-accent-dark:    #92D350;

  --color-red-soft:       #2A1414;
  --color-orange-soft:    #2A1F12;
  --color-blue-soft:      #11203A;
  --color-violet-soft:    #221A38;

  --grad-hero: radial-gradient(circle at 20% 0%, rgba(129, 140, 248, 0.20), transparent 50%),
               radial-gradient(circle at 80% 30%, rgba(146, 211, 80, 0.10), transparent 50%),
               radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.12), transparent 60%);
  --grad-primary: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
  --grad-text: linear-gradient(135deg, #FFFFFF 0%, #B6E489 100%);
  --grad-shine: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow:     0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);
  --shadow-xl:  0 40px 80px rgba(0, 0, 0, 0.70), 0 16px 32px rgba(0, 0, 0, 0.50);
  --shadow-glow:    0 0 0 1px rgba(129, 140, 248, 0.20), 0 12px 32px rgba(129, 140, 248, 0.30);
  --shadow-glow-lg: 0 0 0 1px rgba(129, 140, 248, 0.20), 0 32px 64px -16px rgba(129, 140, 248, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             #08080C;
    --color-bg-alt:         #0F0F16;
    --color-bg-soft:        #15151E;
    --color-surface:        #11111A;
    --color-surface-2:      #1A1A26;
    --color-border:         #25252F;
    --color-border-soft:    rgba(37, 37, 47, 0.6);
    --color-border-strong:  #34343F;

    --color-text:           #F4F4F7;
    --color-text-muted:     #A1A1AA;
    --color-text-soft:      #71717A;
    --color-text-inverse:   #08080C;

    --color-primary:        #818CF8;
    --color-primary-50:     #1A1A2E;
    --color-primary-100:    #232348;
    --color-primary-200:    #2D2D5C;
    --color-primary-700:    #A5B4FC;
    --color-primary-800:    #C7D2FE;
    --color-primary-900:    #E0E7FF;

    --color-accent:         #B6E489;
    --color-accent-soft:    #2A3A1A;
    --color-accent-dark:    #92D350;

    --color-red-soft:       #2A1414;
    --color-orange-soft:    #2A1F12;
    --color-blue-soft:      #11203A;
    --color-violet-soft:    #221A38;

    --grad-hero: radial-gradient(circle at 20% 0%, rgba(129, 140, 248, 0.20), transparent 50%),
                 radial-gradient(circle at 80% 30%, rgba(146, 211, 80, 0.10), transparent 50%),
                 radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.12), transparent 60%);
    --grad-primary: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
    --grad-text: linear-gradient(135deg, #FFFFFF 0%, #B6E489 100%);
    --grad-shine: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow:     0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
    --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);
    --shadow-xl:  0 40px 80px rgba(0, 0, 0, 0.70), 0 16px 32px rgba(0, 0, 0, 0.50);
    --shadow-glow:    0 0 0 1px rgba(129, 140, 248, 0.20), 0 12px 32px rgba(129, 140, 248, 0.30);
    --shadow-glow-lg: 0 0 0 1px rgba(129, 140, 248, 0.20), 0 32px 64px -16px rgba(129, 140, 248, 0.45);
  }
}

/* Reduced motion: disable heavy animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}