/* ============================================================
   DhanGenie Design System — Design Tokens
   All UI values are defined here as CSS custom properties.
   NEVER use hard-coded values in components.css or templates.
   ============================================================ */

:root {
  /* ---- Brand: Deep Blue (Primary) ---- */
  --dg-primary-50:  #eff6ff;
  --dg-primary-100: #dbeafe;
  --dg-primary-200: #bfdbfe;
  --dg-primary-300: #93c5fd;
  --dg-primary-400: #60a5fa;
  --dg-primary-500: #3b82f6;
  --dg-primary-600: #2563eb;
  --dg-primary-700: #1d4ed8;
  --dg-primary-800: #1e40af;
  --dg-primary-900: #1e3a8a;

  /* ---- Accent: Gold (Premium) ---- */
  --dg-gold-50:  #fffbeb;
  --dg-gold-100: #fef3c7;
  --dg-gold-200: #fde68a;
  --dg-gold-400: #fbbf24;
  --dg-gold-500: #f59e0b;
  --dg-gold-600: #d97706;
  --dg-gold-700: #b45309;

  /* ---- Accent: Emerald (Success / Active) ---- */
  --dg-emerald-50:  #ecfdf5;
  --dg-emerald-100: #d1fae5;
  --dg-emerald-400: #34d399;
  --dg-emerald-500: #10b981;
  --dg-emerald-600: #059669;
  --dg-emerald-700: #047857;

  /* ---- Semantic: Warning ---- */
  --dg-warning-50:  #fffbeb;
  --dg-warning-500: #f59e0b;
  --dg-warning-700: #b45309;

  /* ---- Semantic: Danger ---- */
  --dg-danger-50:  #fef2f2;
  --dg-danger-500: #ef4444;
  --dg-danger-600: #dc2626;
  --dg-danger-700: #b91c1c;

  /* ---- Semantic: Info ---- */
  --dg-info-50:  #eff6ff;
  --dg-info-500: #3b82f6;

  /* ---- Surface (Light Mode) ---- */
  --dg-bg:           #f8fafc;
  --dg-surface-0:    #ffffff;
  --dg-surface-1:    #f8fafc;
  --dg-surface-2:    #f1f5f9;
  --dg-surface-3:    #e2e8f0;
  --dg-border:       #e2e8f0;
  --dg-border-subtle:#f1f5f9;

  /* ---- Text (Light Mode) ---- */
  --dg-text:         #0f172a;
  --dg-text-secondary:#475569;
  --dg-text-muted:   #94a3b8;
  --dg-text-inverse: #ffffff;
  --dg-text-brand:   var(--dg-primary-700);

  /* ---- Sidebar ---- */
  --dg-sidebar-bg:      #0f172a;
  --dg-sidebar-border:  #1e293b;
  --dg-sidebar-text:    #94a3b8;
  --dg-sidebar-text-active: #f8fafc;
  --dg-sidebar-hover:   rgba(255,255,255,0.06);
  --dg-sidebar-active:  rgba(59,130,246,0.15);
  --dg-sidebar-active-border: var(--dg-primary-500);

  /* ---- Card ---- */
  --dg-card:        var(--dg-surface-0);
  --dg-card-border: var(--dg-border);
  --dg-card-radius: var(--dg-radius-lg);

  /* ---- Typography ---- */
  --dg-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dg-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --dg-font-size-xs:   0.6875rem;  /* 11px */
  --dg-font-size-sm:   0.75rem;    /* 12px */
  --dg-font-size-base: 0.8125rem;  /* 13px */
  --dg-font-size-md:   0.875rem;   /* 14px */
  --dg-font-size-lg:   1rem;       /* 16px */
  --dg-font-size-xl:   1.125rem;   /* 18px */
  --dg-font-size-2xl:  1.25rem;    /* 20px */
  --dg-font-size-3xl:  1.5rem;     /* 24px */
  --dg-font-size-4xl:  1.875rem;   /* 30px */
  --dg-line-height-tight:  1.25;
  --dg-line-height-normal: 1.5;
  --dg-line-height-relaxed:1.75;
  --dg-font-weight-regular: 400;
  --dg-font-weight-medium:  500;
  --dg-font-weight-semibold:600;
  --dg-font-weight-bold:    700;
  --dg-letter-spacing-tight: -0.02em;
  --dg-letter-spacing-normal: 0;
  --dg-letter-spacing-wide:   0.025em;
  --dg-letter-spacing-wider:  0.05em;
  --dg-letter-spacing-widest: 0.1em;

  /* ---- Spacing Scale ---- */
  --dg-space-px:  1px;
  --dg-space-0:   0;
  --dg-space-1:   0.25rem;   /* 4px */
  --dg-space-2:   0.5rem;    /* 8px */
  --dg-space-3:   0.75rem;   /* 12px */
  --dg-space-4:   1rem;      /* 16px */
  --dg-space-5:   1.25rem;   /* 20px */
  --dg-space-6:   1.5rem;    /* 24px */
  --dg-space-7:   1.75rem;   /* 28px */
  --dg-space-8:   2rem;      /* 32px */
  --dg-space-10:  2.5rem;    /* 40px */
  --dg-space-12:  3rem;      /* 48px */
  --dg-space-16:  4rem;      /* 64px */
  --dg-space-20:  5rem;      /* 80px */
  --dg-space-24:  6rem;      /* 96px */

  /* ---- Border Radius ---- */
  --dg-radius-none: 0;
  --dg-radius-sm:   0.25rem;   /* 4px */
  --dg-radius-md:   0.375rem;  /* 6px */
  --dg-radius-lg:   0.5rem;    /* 8px */
  --dg-radius-xl:   0.75rem;   /* 12px */
  --dg-radius-2xl:  1rem;      /* 16px */
  --dg-radius-3xl:  1.5rem;    /* 24px */
  --dg-radius-full: 9999px;

  /* ---- Shadows ---- */
  --dg-shadow-xs:  0 1px 2px rgba(15,23,42,0.04);
  --dg-shadow-sm:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --dg-shadow-md:  0 4px 6px -1px rgba(15,23,42,0.07), 0 2px 4px -2px rgba(15,23,42,0.05);
  --dg-shadow-lg:  0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.05);
  --dg-shadow-xl:  0 20px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.06);
  --dg-shadow-2xl: 0 25px 50px -12px rgba(15,23,42,0.15);
  --dg-shadow-brand: 0 0 0 3px rgba(59,130,246,0.25);
  --dg-shadow-inner: inset 0 2px 4px rgba(15,23,42,0.06);

  /* ---- Z-Index ---- */
  --dg-z-base:    0;
  --dg-z-raised:  10;
  --dg-z-dropdown:20;
  --dg-z-sticky:  30;
  --dg-z-topbar:  40;
  --dg-z-sidebar: 50;
  --dg-z-overlay: 60;
  --dg-z-modal:   70;
  --dg-z-toast:   80;
  --dg-z-ai:      90;

  /* ---- Layout ---- */
  --dg-sidebar-width:     260px;
  --dg-sidebar-collapsed: 64px;
  --dg-topbar-height:     56px;
  --dg-content-max-width: 1400px;
  --dg-bottom-nav-height: 60px;

  /* ---- Transitions ---- */
  --dg-duration-fast:   100ms;
  --dg-duration-base:   150ms;
  --dg-duration-slow:   250ms;
  --dg-duration-slower: 350ms;
  --dg-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --dg-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --dg-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --dg-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Density (default) ---- */
  --dg-density-factor: 1;
  --dg-input-height:   calc(2.25rem * var(--dg-density-factor));
  --dg-btn-height:     calc(2rem * var(--dg-density-factor));
  --dg-table-row-h:    calc(2.75rem * var(--dg-density-factor));

  /* ---- Branding Overrides (injected by DesignTokenManager.php) ---- */
  --dg-brand-primary:   var(--dg-primary-600);
  --dg-brand-primary-h: var(--dg-primary-700);
  --dg-brand-on:        #ffffff;
  --dg-brand-subtle:    var(--dg-primary-50);
  --dg-brand-text:      var(--dg-primary-700);
}

/* ============================================================
   Dark Mode Overrides
   ============================================================ */
[data-theme="dark"] {
  --dg-bg:           #09090b;
  --dg-surface-0:    #09090b;
  --dg-surface-1:    #111115;
  --dg-surface-2:    #18181b;
  --dg-surface-3:    #27272a;
  --dg-border:       #27272a;
  --dg-border-subtle:#18181b;

  --dg-text:           #fafafa;
  --dg-text-secondary: #a1a1aa;
  --dg-text-muted:     #52525b;
  --dg-text-brand:     var(--dg-primary-400);

  --dg-sidebar-bg:     #09090b;
  --dg-sidebar-border: #18181b;

  --dg-card: var(--dg-surface-1);

  --dg-shadow-xs:  0 1px 2px rgba(0,0,0,0.30);
  --dg-shadow-sm:  0 1px 3px rgba(0,0,0,0.40);
  --dg-shadow-md:  0 4px 6px rgba(0,0,0,0.40);
  --dg-shadow-lg:  0 10px 15px rgba(0,0,0,0.50);
  --dg-shadow-xl:  0 20px 25px rgba(0,0,0,0.60);
  --dg-shadow-2xl: 0 25px 50px rgba(0,0,0,0.70);

  --dg-emerald-50:  rgba(5,150,105,0.12);
  --dg-gold-50:     rgba(217,119,6,0.12);
  --dg-danger-50:   rgba(220,38,38,0.12);
  --dg-info-50:     rgba(59,130,246,0.12);
  --dg-warning-50:  rgba(245,158,11,0.12);
  --dg-primary-50:  rgba(59,130,246,0.12);
  --dg-primary-100: rgba(59,130,246,0.18);
}

/* ---- Density Variants ---- */
[data-density="compact"]     { --dg-density-factor: 0.85; }
[data-density="comfortable"] { --dg-density-factor: 1.15; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dg-duration-fast:   0ms;
    --dg-duration-base:   0ms;
    --dg-duration-slow:   0ms;
    --dg-duration-slower: 0ms;
  }
}