/* ============================================================
   THE DIGITAL MARKETING HQ — Design Tokens & CSS Variables
   css/variables.css
   ============================================================ */

:root, [data-theme="light"] {
    /* Brand Colors */
    --color-primary: #3b5cf8;
    --color-primary-hover: #2d4de0;
    --color-accent: #10b981;
    --color-accent-hover: #059669;

    /* Backgrounds */
    --bg-body: #f4f6fb;
    --bg-card: #ffffff;
    --bg-surface: #ffffff;
    --bg-hover: #f0f2f8;

    /* Typography Colors */
    --text-primary: #1a1d2e;
    --text-secondary: #5a6178;
    --text-muted: #8b92a8;

    /* Borders & Lines */
    --border-color: #e2e6f0;

    /* Typography Families */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);

    /* ============================================================
       EXTENDED DESIGN TOKENS
       base.css, components.css, admin.css, and docs/manual.html
       all consume this richer --color-*/--space-*/--font-size-*
       vocabulary. These were previously undefined (only the
       shorter aliases above existed), which is why every page
       except index.html (which has its own inline fallback
       styles) rendered with no real styling. Defined here so
       every stylesheet in the project resolves correctly.
       ============================================================ */

    /* Color ramps — 50 (lightest) to 900 (darkest) */
    --color-primary-50:  #eef1fe;
    --color-primary-100: #dde3fd;
    --color-primary-200: #b8c5fb;
    --color-primary-300: #93a7f9;
    --color-primary-400: #6382f8;
    --color-primary-500: #3b5cf8;
    --color-primary-600: #2d4de0;
    --color-primary-700: #233dbd;
    --color-primary-800: #1c3096;
    --color-primary-900: #182874;

    --color-accent-50:  #e8faf3;
    --color-accent-100: #d1f5e6;
    --color-accent-200: #a3ebce;
    --color-accent-300: #6ddcb1;
    --color-accent-400: #34c893;
    --color-accent-500: #10b981;
    --color-accent-600: #059669;
    --color-accent-700: #047a56;
    --color-accent-800: #046245;
    --color-accent-900: #035039;

    --color-danger-50:  #fef2f2;
    --color-danger-100: #fde2e2;
    --color-danger-200: #fbc8c8;
    --color-danger-300: #f7a3a3;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-900: #7f1d1d;

    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-900: #78350f;

    --color-info-50:  #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-200: #bfdbfe;
    --color-info-300: #93c5fd;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;
    --color-info-900: #1e3a8a;

    --color-neutral-100: #f1f2f6;
    --color-neutral-300: #d3d6e0;
    --color-neutral-400: #adb1c4;
    --color-neutral-500: #8b92a8;
    --color-neutral-600: #6c7286;
    --color-neutral-700: #5a6178;
    --color-neutral-800: #3a3f52;
    --color-neutral-900: #23273a;
    --color-neutral-950: #14172480;

    /* Status colors */
    --color-status-active:   var(--color-accent-500);
    --color-status-inactive: var(--color-neutral-400);
    --color-status-pending:  var(--color-warning-500);
    --color-status-warning:  var(--color-warning-500);
    --color-status-error:    var(--color-danger-500);

    /* Semantic backgrounds */
    --color-bg-primary:   var(--bg-body);
    --color-bg-secondary: #eceff7;
    --color-bg-tertiary:  #e4e8f4;
    --color-bg-card:      var(--bg-card);
    --color-bg-elevated:  #ffffff;
    --color-bg-hover:     var(--bg-hover);
    --color-bg-input:     #ffffff;
    --color-bg-code:      #f0f2f8;
    --color-bg-overlay:   rgba(10, 14, 26, 0.5);
    --color-bg-navbar:    rgba(255, 255, 255, 0.85);
    --color-bg-sidebar:   var(--bg-card);

    /* Semantic text */
    --color-text-primary:   var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary:  var(--text-muted);
    --color-text-muted:     var(--text-muted);
    --color-text-body:      var(--text-secondary);
    --color-text-heading:   var(--text-primary);
    --color-text-link:      var(--color-primary-600);
    --color-text-link-hover: var(--color-primary-700);

    /* Semantic borders */
    --color-border-primary:   var(--border-color);
    --color-border-secondary: var(--border-color);
    --color-border-input:     var(--border-color);
    --color-border-focus:     var(--color-primary-500);
    --color-border-error:     var(--color-danger-500);

    /* Typography scale */
    --font-primary: var(--font-body);
    --font-size-xs:  0.75rem;
    --font-size-sm:  0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:  1.125rem;
    --font-size-xl:  1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;
    --font-weight-black:      900;

    --line-height-tight:   1.15;
    --line-height-snug:    1.3;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.65;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-wide:  0.05em;

    /* Spacing scale (4px base unit) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Radius extras */
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadow extras */
    --shadow-2xl: 0 25px 70px rgba(0,0,0,0.18);
    --shadow-card: var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
    --gradient-hero: linear-gradient(135deg, #3b5cf8 0%, #6382f8 50%, #10b981 100%);
    --gradient-card: linear-gradient(160deg, var(--bg-card), var(--color-bg-secondary));
    --gradient-premium: linear-gradient(135deg, #6382f8 0%, #3b5cf8 50%, #182874 100%);

    /* Layout dimensions */
    --navbar-height: 72px;
    --navbar-height-mobile: 60px;
    --sidebar-width: 260px;
    --sidebar-collapsed: 76px;
    --container-max: 1280px;
    --container-narrow: 800px;
    --container-wide: 1440px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
    --z-max: 999;
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
[data-theme="dark"] {
    /* Brand Colors (slight vibrancy boost for dark background) */
    --color-primary: #5375f9;
    --color-primary-hover: #3b5cf8;
    --color-accent: #10b981;
    --color-accent-hover: #34d399;

    /* Deep Sleek Dark Backgrounds */
    --bg-body: #0b0e19;
    --bg-card: #141828;
    --bg-surface: #101322;
    --bg-hover: #1e233a;

    /* Dark Mode Typography */
    --text-primary: #f0f3fe;
    --text-secondary: #a2a8c3;
    --text-muted: #6c7393;

    /* Dark Mode Borders */
    --border-color: #222740;

    /* Dark Mode Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);

    /* ============================================================
       EXTENDED DESIGN TOKENS — Dark Mode
       Semantic tokens re-pointed at the dark palette above; the
       raw color ramps (primary-500, danger-600, etc.) stay the
       same across themes on purpose — only what they're used FOR
       (backgrounds, text, borders) changes in dark mode.
       ============================================================ */

    --color-primary-50:  #182874;
    --color-primary-100: #1c3096;
    --color-primary-200: #233dbd;
    --color-primary-300: #2d4de0;
    --color-primary-700: #b8c5fb;
    --color-primary-900: #eef1fe;

    --color-neutral-100: #23273a;
    --color-neutral-300: #3a3f52;
    --color-neutral-400: #5a6178;
    --color-neutral-700: #adb1c4;

    /* Status colors */
    --color-status-active:   var(--color-accent-500);
    --color-status-inactive: var(--color-neutral-600);
    --color-status-pending:  var(--color-warning-500);
    --color-status-warning:  var(--color-warning-500);
    --color-status-error:    var(--color-danger-500);

    /* Semantic backgrounds */
    --color-bg-primary:   var(--bg-body);
    --color-bg-secondary: #131728;
    --color-bg-tertiary:  #1a1f34;
    --color-bg-card:      var(--bg-card);
    --color-bg-elevated:  #191e30;
    --color-bg-hover:     var(--bg-hover);
    --color-bg-input:     #161b2c;
    --color-bg-code:      #0f1220;
    --color-bg-overlay:   rgba(4, 6, 12, 0.7);
    --color-bg-navbar:    rgba(11, 14, 25, 0.85);
    --color-bg-sidebar:   var(--bg-card);

    /* Semantic text */
    --color-text-primary:   var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary:  var(--text-muted);
    --color-text-muted:     var(--text-muted);
    --color-text-body:      var(--text-secondary);
    --color-text-heading:   var(--text-primary);
    --color-text-link:      var(--color-primary-300);
    --color-text-link-hover: var(--color-primary-200);

    /* Semantic borders */
    --color-border-primary:   var(--border-color);
    --color-border-secondary: var(--border-color);
    --color-border-input:     var(--border-color);
    --color-border-focus:     var(--color-primary-400);
    --color-border-error:     var(--color-danger-500);

    /* Gradients */
    --gradient-card: linear-gradient(160deg, var(--bg-card), var(--color-bg-secondary));
}