/* ==========================================================================
   Design Tokens — CSS Custom Properties
   Dark / Light theme support
   ========================================================================== */

:root {
    /* ======================================================================
       Colors — Brand
       ====================================================================== */
    --color-primary:       #6366f1;  /* Indigo */
    --color-primary-hover: #818cf8;
    --color-primary-active:#4f46e5;
    --color-primary-rgb:   99, 102, 241;

    --color-secondary:       #8b5cf6;  /* Purple */
    --color-secondary-hover: #a78bfa;
    --color-secondary-active:#7c3aed;
    --color-secondary-rgb:   139, 92, 246;

    /* ======================================================================
       Colors — Semantic
       ====================================================================== */
    --color-success:       #22c55e;
    --color-success-hover: #4ade80;
    --color-success-bg:    rgba(34, 197, 94, 0.1);

    --color-warning:       #f59e0b;
    --color-warning-hover: #fbbf24;
    --color-warning-bg:    rgba(245, 158, 11, 0.1);

    --color-danger:        #ef4444;
    --color-danger-hover:  #f87171;
    --color-danger-active: #dc2626;
    --color-danger-bg:     rgba(239, 68, 68, 0.1);

    --color-info:          #3b82f6;
    --color-info-hover:    #60a5fa;
    --color-info-bg:       rgba(59, 130, 246, 0.1);

    /* ======================================================================
       Backgrounds
       ====================================================================== */
    --bg-primary:   #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary:  #334155;
    --bg-card:      #1e293b;
    --bg-hover:     rgba(255, 255, 255, 0.04);
    --bg-active:    rgba(255, 255, 255, 0.08);
    --bg-overlay:   rgba(0, 0, 0, 0.6);

    /* ======================================================================
       Text
       ====================================================================== */
    --text-primary:   #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-inverse:   #0f172a;
    --text-link:      var(--color-primary);

    /* ======================================================================
       Borders
       ====================================================================== */
    --border-color:    #334155;
    --border-light:    rgba(255, 255, 255, 0.06);
    --border-radius:   8px;
    --border-radius-sm:4px;
    --border-radius-lg:12px;
    --border-radius-xl:16px;
    --border-radius-full: 9999px;

    /* ======================================================================
       Breakpoints (for reference — use in @media queries directly)
       ====================================================================== */
    --bp-mobile:  480px;
    --bp-tablet:  768px;
    --bp-desktop: 1024px;
    --bp-wide:    1280px;

    /* ======================================================================
       Spacing Scale
       ====================================================================== */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* ======================================================================
       Typography
       ====================================================================== */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                   'Helvetica Neue', Arial, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                   ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono',
                   Menlo, monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold:   700;

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed:1.75;

    /* ======================================================================
       Shadows
       ====================================================================== */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4),
                  0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4),
                  0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5),
                  0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-glow:0 0 20px rgba(99, 102, 241, 0.15);

    /* ======================================================================
       Transitions
       ====================================================================== */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ======================================================================
       Layout
       ====================================================================== */
    --sidebar-width:     260px;
    --sidebar-collapsed: 60px;
    --header-height:     60px;
    --content-max-width: 1400px;

    /* ======================================================================
       Z-index Scale
       ====================================================================== */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-sidebar:   300;
    --z-overlay:   400;
    --z-modal:     500;
    --z-toast:     600;
    --z-tooltip:   700;
}

/* ==========================================================================
   Light Theme Overrides
   ========================================================================== */

[data-theme="light"] {
    /* Backgrounds */
    --bg-primary:   #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary:  #e2e8f0;
    --bg-card:      #ffffff;
    --bg-hover:     rgba(0, 0, 0, 0.04);
    --bg-active:    rgba(0, 0, 0, 0.08);
    --bg-overlay:   rgba(0, 0, 0, 0.4);

    /* Text */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-inverse:   #f8fafc;

    /* Borders */
    --border-color:    #cbd5e1;
    --border-light:    rgba(0, 0, 0, 0.06);

    /* Semantic — slightly adjusted for light bg readability */
    --color-success-bg:  rgba(34, 197, 94, 0.12);
    --color-warning-bg:  rgba(245, 158, 11, 0.12);
    --color-danger-bg:   rgba(239, 68, 68, 0.1);
    --color-info-bg:     rgba(59, 130, 246, 0.1);

    /* Shadows — lighter for light theme */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1),
                  0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1),
                  0 4px 6px -4px rgba(0, 0, 0, 0.06);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.12),
                  0 8px 10px -6px rgba(0, 0, 0, 0.06);
    --shadow-glow:0 0 20px rgba(99, 102, 241, 0.1);
}