/**
 * Harith Design System - Design Tokens
 * Version: 1.0.0
 * 
 * Core CSS variables for colors, spacing, typography, and theme values.
 * All components and utilities reference these tokens.
 */
:root {
    /* ===================================
       Shell (Header/Footer) Tokens
       =================================== */
    --shell-bg-light: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #fff9c4 100%);
    --shell-bg-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    --shell-text-light: #222;
    --shell-text-dark: #e0e0e0;
    --shell-header-bg-light: rgba(255, 255, 255, 0.52);
    --shell-header-bg-dark: rgba(18, 18, 20, 0.55);
    --shell-footer-bg-light: rgba(255, 255, 255, 0.5);
    --shell-footer-bg-dark: rgba(18, 18, 20, 0.55);
    --shell-nav-link-color: #111;
    --shell-nav-link-color-dark: #f3f4f6;
    --shell-border: 1px solid rgba(255, 255, 255, 0.4);
    --shell-border-dark: 1px solid rgba(255, 255, 255, 0.22);
    /* ===================================
       Button Tokens
       =================================== */
    --btn-radius: 12px;
    --btn-padding: 0.5rem 1.25rem;
    --btn-icon-margin: 6px;
    --btn-bg: rgba(255, 255, 255, 0.6);
    --btn-color: #111;
    --btn-border: 1px solid rgba(255, 255, 255, 0.3);
    --btn-hover-bg: rgba(255, 255, 255, 0.8);
    --btn-hover-color: #000;
    --btn-hover-border: rgba(56, 189, 248, 0.6);
    --btn-hover-shadow: 0 12px 40px rgba(56, 189, 248, 0.3), 0 8px 16px rgba(0, 0, 0, 0.1);
    --btn-dark-bg: rgba(50, 50, 50, 0.5);
    --btn-dark-color: #e0e0e0;
    --btn-dark-border: 1px solid rgba(255, 255, 255, 0.1);
    --btn-dark-hover-bg: rgba(70, 70, 70, 0.6);
    --btn-dark-hover-color: #fff;

    /* ===================================
       Spacing & Layout
       =================================== */
    --main-horizontal-padding: 2rem;
    --header-height: 4.5rem;
    --footer-height: 4.5rem;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ===================================
       Typography
       =================================== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --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: 2rem;

    --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;

    /* ===================================
       Colors
       =================================== */
    --color-primary: #38bdf8;
    --color-primary-dark: #7dd3fc;

    --color-discord: #5865F2;

    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    --color-text-primary: #111;
    --color-text-secondary: #555;
    --color-text-tertiary: #888;

    --color-text-primary-dark: #e0e0e0;
    --color-text-secondary-dark: #aaa;
    --color-text-tertiary-dark: #777;

    /* ===================================
       Shadows & Effects
       =================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);

    --shadow-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-dark-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-dark-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-dark-xl: 0 12px 40px rgba(0, 0, 0, 0.6);

    --blur-light: blur(10px) saturate(180%);
    --blur-heavy: blur(20px) saturate(180%);

    /* ===================================
       Border Radius
       =================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ===================================
       Transitions
       =================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===================================
       Z-Index Layers
       =================================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;

    /* ===================================
       Chat Widget
       =================================== */
    --chat-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --chat-button-size: 60px;
    --chat-button-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
}

/* ===================================
   Dark Mode Token Overrides
   =================================== */
.dark-mode {
    --shell-bg: var(--shell-bg-dark);
    --shell-text: var(--shell-text-dark);
    --shell-header-bg: var(--shell-header-bg-dark);
    --shell-footer-bg: var(--shell-footer-bg-dark);
    --shell-nav-link-color: var(--shell-nav-link-color-dark);
    --shell-border: var(--shell-border-dark);

    --btn-bg: var(--btn-dark-bg);
    --btn-color: var(--btn-dark-color);
    --btn-border: var(--btn-dark-border);
    --btn-hover-bg: var(--btn-dark-hover-bg);
    --btn-hover-color: var(--btn-dark-hover-color);

    --color-primary: var(--color-primary-dark);
    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-text-tertiary: var(--color-text-tertiary-dark);

    --shadow-sm: var(--shadow-dark-sm);
    --shadow-md: var(--shadow-dark-md);
    --shadow-lg: var(--shadow-dark-lg);
    --shadow-xl: var(--shadow-dark-xl);
}