/* ==========================================================================
   tokens.css — Single Source of Truth for all Design Variables
   diPANi Design System
   ========================================================================== */

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3/SourceSans3-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3/SourceSans3-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3/SourceSans3-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3/SourceSans3-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3/SourceSans3-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}



:root {

    --dp-slate-50: #f8fafc;
    --dp-slate-100: #f1f5f9;
    --dp-slate-200: #e2e8f0;
    --dp-slate-300: #cbd5e1;
    --dp-slate-400: #94a3b8;
    --dp-slate-500: #64748b;
    --dp-slate-600: #475569;
    --dp-slate-700: #334155;
    --dp-slate-800: #1e293b;
    --dp-slate-900: #0f172a;
    --dp-slate-950: #020617;


    --dp-slate-400-rgb: 148, 163, 184;
    --dp-slate-500-rgb: 100, 116, 139;


    --dp-blue-50: #eff6ff;
    --dp-blue-100: #dbeafe;
    --dp-blue-200: #bfdbfe;
    --dp-blue-400: #60a5fa;
    --dp-blue-500: #3b82f6;
    --dp-blue-600: #2563eb;
    --dp-blue-700: #1d4ed8;
    --dp-blue-800: #1e40af;


    --dp-emerald-50: #ecfdf5;
    --dp-emerald-500: #10b981;
    --dp-emerald-600: #059669;
    --dp-emerald-700: #047857;


    --dp-red-50: #fef2f2;
    --dp-red-500: #ef4444;
    --dp-red-600: #dc2626;
    --dp-red-700: #b91c1c;


    --dp-amber-50: #fffbeb;
    --dp-amber-500: #f59e0b;
    --dp-amber-600: #d97706;


    --dp-cyan-50: #ecfeff;
    --dp-cyan-500: #06b6d4;
    --dp-cyan-600: #0891b2;


    --dp-gold-400: #fbbf24;
    --dp-gold-500: #d4af37;


    --dp-space-0: 0;
    --dp-space-0-5: 0.125rem;
    --dp-space-1: 0.25rem;
    --dp-space-1-5: 0.375rem;
    --dp-space-2: 0.5rem;
    --dp-space-3: 0.75rem;
    --dp-space-4: 1rem;
    --dp-space-5: 1.25rem;
    --dp-space-6: 1.5rem;
    --dp-space-8: 2rem;
    --dp-space-10: 2.5rem;
    --dp-space-12: 3rem;
    --dp-space-16: 4rem;


    --dp-radius-1: 0.125rem;
    --dp-radius-2: 0.25rem;
    --dp-radius-3: 0.375rem;
    --dp-radius-4: 0.5rem;
    --dp-radius-6: 0.75rem;
    --dp-radius-8: 1rem;
    --dp-radius-full: 9999px;
}



:root {

    --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', system-ui, sans-serif;


    --text-xs: 0.625rem;
    --text-sm: 0.6875rem;
    --text-sm-plus: 0.75rem;
    --text-base: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 0.9375rem;
    --text-xl: 1rem;
    --text-2xl: 1.125rem;
    --text-3xl: 1.5rem;
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;


    --icon-xs: 0.875rem;
    --icon-sm: 1rem;
    --icon-md: 1.125rem;
    --icon-base: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-xl: 1.75rem;
    --icon-2xl: 2rem;
    --icon-3xl: 2.25rem;
    --icon-4xl: 2.5rem;
    --icon-5xl: 3.5rem;
    --icon-6xl: 4rem;
    --icon-7xl: 7.5rem;


    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;


    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;


    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;


    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;


    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1200;


    --spacing-2xs: var(--dp-space-0-5);
    --spacing-xs: var(--dp-space-1);
    --spacing-sm: var(--dp-space-2);
    --spacing-md: var(--dp-space-3);
    --spacing-lg: var(--dp-space-4);
    --spacing-xl: var(--dp-space-6);
    --spacing-2xl: var(--dp-space-8);
    --spacing-3xl: var(--dp-space-12);
    --spacing-4xl: var(--dp-space-16);


    --surface-primary: #ffffff;
    --surface-secondary: var(--dp-slate-50);
    --surface-elevated: #ffffff;
    --surface-overlay: rgba(0, 0, 0, 0.5);
    --surface-canvas: var(--dp-slate-100);
    --shadow-sidebar: 0 0 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);


    --text-primary: var(--dp-slate-800);
    --text-secondary: var(--dp-slate-500);
    --text-tertiary: var(--dp-slate-400);
    --text-inverse: #ffffff;
    --text-link: var(--dp-blue-600);
    --text-link-hover: var(--dp-blue-700);


    --accent: var(--dp-blue-600);
    --accent-rgb: 37, 99, 235;
    --accent-light: var(--dp-blue-50);
    --accent-hover: var(--dp-blue-700);


    --status-success: var(--dp-emerald-600);
    --status-success-rgb: 5, 150, 105;
    --status-success-light: var(--dp-emerald-50);
    --status-danger: var(--dp-red-600);
    --status-danger-rgb: 220, 38, 38;
    --status-danger-light: var(--dp-red-50);
    --status-warning: var(--dp-amber-500);
    --status-warning-rgb: 245, 158, 11;
    --status-warning-light: var(--dp-amber-50);
    --status-info: var(--dp-cyan-600);
    --status-info-rgb: 8, 145, 178;
    --status-info-light: var(--dp-cyan-50);


    --border-default: var(--dp-slate-200);
    --border-subtle: var(--dp-slate-100);
    --border-strong: var(--dp-slate-300);


    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.08);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);


    --radius-xs: var(--dp-radius-1);
    --radius-sm: var(--dp-radius-2);
    --radius-md: var(--dp-radius-4);
    --radius-lg: var(--dp-radius-6);
    --radius-xl: var(--dp-radius-8);
    --radius-full: var(--dp-radius-full);


    --special-gold: var(--dp-gold-400);
    --special-gold-dark: var(--dp-gold-500);
    --special-gold-rgb: 251, 191, 36;
}



[data-bs-theme="dark"] {

    --dp-slate-400-rgb: 148, 163, 184;
    --dp-slate-500-rgb: 100, 116, 139;

    --surface-primary: var(--dp-slate-900);
    --surface-secondary: var(--dp-slate-800);
    --surface-elevated: var(--dp-slate-800);
    --surface-overlay: rgba(0, 0, 0, 0.7);
    --surface-canvas: var(--dp-slate-950);
    --shadow-sidebar: 0 0 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);

    --text-primary: var(--dp-slate-100);
    --text-secondary: var(--dp-slate-400);
    --text-tertiary: var(--dp-slate-500);
    --text-link: var(--dp-blue-400);
    --text-link-hover: var(--dp-blue-200);

    --accent: var(--dp-blue-400);
    --accent-rgb: 96, 165, 250;
    --accent-light: rgba(96, 165, 250, 0.15);
    --accent-hover: var(--dp-blue-200);

    --status-success: var(--dp-emerald-500);
    --status-success-rgb: 16, 185, 129;
    --status-danger: var(--dp-red-500);
    --status-danger-rgb: 239, 68, 68;
    --status-warning: var(--dp-amber-500);
    --status-warning-rgb: 245, 158, 11;
    --status-info: var(--dp-cyan-500);
    --status-info-rgb: 6, 182, 212;

    --status-success-light: rgba(16, 185, 129, 0.15);
    --status-danger-light: rgba(239, 68, 68, 0.15);
    --status-warning-light: rgba(245, 158, 11, 0.15);
    --status-info-light: rgba(6, 182, 212, 0.15);

    --border-default: var(--dp-slate-700);
    --border-subtle: var(--dp-slate-800);
    --border-strong: var(--dp-slate-600);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --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 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}



[data-accessibility-highcontrast="true"]:not([data-bs-theme="dark"]) {

    --dp-slate-400-rgb: 148, 163, 184;
    --dp-slate-500-rgb: 100, 116, 139;

    --surface-primary: #ffffff;
    --surface-secondary: #f5f5f5;
    --surface-elevated: #ffffff;
    --surface-canvas: #ebebeb;
    --shadow-sidebar: 0 0 0 2px var(--border-default);

    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --text-tertiary: #333333;
    --text-link: #0000ee;
    --text-link-hover: #0000cc;

    --accent: #0000ee;
    --accent-rgb: 0, 0, 238;
    --accent-light: rgba(0, 0, 238, 0.15);
    --accent-hover: #0000cc;

    --status-success: #006400;
    --status-success-rgb: 0, 100, 0;
    --status-danger: #8b0000;
    --status-danger-rgb: 139, 0, 0;
    --status-warning: #b8860b;
    --status-warning-rgb: 184, 134, 11;
    --status-info: #00008b;
    --status-info-rgb: 0, 0, 139;

    --border-default: #000000;
    --border-subtle: #666666;
    --border-strong: #000000;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
}



[data-accessibility-highcontrast="true"][data-bs-theme="dark"] {

    --dp-slate-400-rgb: 148, 163, 184;
    --dp-slate-500-rgb: 100, 116, 139;

    --surface-primary: #000000;
    --surface-secondary: #1a1a1a;
    --surface-elevated: #1a1a1a;
    --surface-canvas: #0d0d0d;
    --shadow-sidebar: 0 0 0 2px var(--border-default);

    --text-primary: #ffffff;
    --text-secondary: #e6e6e6;
    --text-tertiary: #cccccc;
    --text-link: #6eb9ff;
    --text-link-hover: #9ed0ff;

    --accent: #6eb9ff;
    --accent-rgb: 110, 185, 255;
    --accent-light: rgba(110, 185, 255, 0.15);

    --status-success: #00ff00;
    --status-success-rgb: 0, 255, 0;
    --status-danger: #ff6b6b;
    --status-danger-rgb: 255, 107, 107;
    --status-warning: #ffd700;
    --status-warning-rgb: 255, 215, 0;
    --status-info: #87ceeb;
    --status-info-rgb: 135, 206, 235;

    --border-default: #ffffff;
    --border-subtle: #666666;
    --border-strong: #ffffff;

    --shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.3);
    --shadow-md: 0 4px 10px rgba(255, 255, 255, 0.4);
}



:root {

    --primary-color: var(--surface-primary);
    --background-color: var(--surface-canvas);
    --navbar-background-color: var(--surface-secondary);
    --text-color: var(--text-primary);
    --nav-text-color: var(--text-primary);
    --nav-text-hover-color: var(--text-link-hover);
    --nav-header-color: var(--text-secondary);
    --nav-header-hover-color: var(--text-link-hover);
    --nav-icon-color: var(--text-secondary);
    --sidebar-heading-color: var(--text-secondary);
    --sidebar-heading-hover-color: var(--text-link-hover);
    --icon-color: var(--text-tertiary);
    --devider-color: var(--border-strong);
    --devider-color-rgb: 203, 213, 225;
    --accent-color: var(--accent);
    --accent-color-rgb: var(--accent-rgb);


    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-secondary: var(--dp-slate-500);
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: var(--status-success);
    --bs-success-rgb: var(--status-success-rgb);
    --bs-danger: var(--status-danger);
    --bs-danger-rgb: var(--status-danger-rgb);
    --bs-warning: var(--status-warning);
    --bs-warning-rgb: var(--status-warning-rgb);
    --bs-info: var(--status-info);
    --bs-info-rgb: var(--status-info-rgb);
    --bs-light: var(--surface-secondary);
    --bs-dark: var(--dp-slate-900);
    --bs-body-color: var(--text-primary);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: var(--surface-primary);
    --bs-border-color: var(--border-default);
    --bs-secondary-bg: var(--surface-secondary);
    --bs-secondary-color: var(--text-secondary);
    --bs-card-bg: var(--surface-elevated);
    --bs-primary-light: rgba(var(--accent-rgb), 0.1);
    --bs-secondary-light: rgba(100, 116, 139, 0.1);
    --bs-success-light: var(--status-success-light);
    --bs-danger-light: var(--status-danger-light);
    --bs-warning-light: var(--status-warning-light);
    --bs-info-light: var(--status-info-light);


    --color-primary: var(--accent);
    --color-primary-light: rgba(var(--accent-rgb), 0.1);
    --color-secondary: var(--dp-slate-500);
    --color-success: var(--status-success);
    --color-success-light: var(--status-success-light);
    --color-danger: var(--status-danger);
    --color-danger-light: var(--status-danger-light);
    --color-warning: var(--status-warning);
    --color-warning-light: var(--status-warning-light);
    --color-info: var(--status-info);
    --color-border: var(--border-default);
    --color-bg: var(--surface-secondary);
    --color-surface: var(--surface-primary);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-secondary);
    --color-gold: var(--special-gold);
    --color-gold-dark: var(--special-gold-dark);
    --color-gold-rgb: var(--special-gold-rgb);
    --color-gold-dark-rgb: 212, 175, 55;
    --color-success-bright: #28a745;
}


[data-bs-theme="dark"] {
    --devider-color-rgb: 71, 85, 105;
    --bs-body-color-rgb: 241, 245, 249;
    --bs-primary-rgb: 96, 165, 250;
    --bs-secondary-rgb: 148, 163, 184;
}


[data-accessibility-highcontrast="true"]:not([data-bs-theme="dark"]) {
    --primary-color: #ffffff;
    --background-color: #ebebeb;
    --navbar-background-color: #f5f5f5;
    --text-color: #000000;
    --nav-text-color: #000000;
    --nav-text-hover-color: #0000ee;
    --nav-header-color: #000000;
    --nav-header-hover-color: #0000cc;
    --nav-icon-color: #000000;
    --sidebar-heading-color: #1a1a1a;
    --sidebar-heading-hover-color: #0000ee;
    --icon-color: #000000;
    --devider-color: #000000;
    --devider-color-rgb: 0, 0, 0;
    --accent-color: #0000ee;
    --accent-color-rgb: 0, 0, 238;
    --bs-primary: #0000ee;
    --bs-primary-rgb: 0, 0, 238;
    --bs-secondary: #1a1a1a;
    --bs-secondary-rgb: 26, 26, 26;
    --bs-success: #006400;
    --bs-success-rgb: 0, 100, 0;
    --bs-danger: #8b0000;
    --bs-danger-rgb: 139, 0, 0;
    --bs-warning: #b8860b;
    --bs-warning-rgb: 184, 134, 11;
    --bs-info: #00008b;
    --bs-info-rgb: 0, 0, 139;
    --bs-light: #f5f5f5;
    --bs-dark: #000000;
    --bs-body-color: #000000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg: #ffffff;
    --bs-border-color: #000000;
    --bs-border-width: 2px;
    --bs-secondary-bg: #f5f5f5;
    --bs-secondary-color: #000000;
    --bs-card-bg: #ffffff;
    --bs-primary-light: rgba(0, 0, 238, 0.15);
    --bs-secondary-light: rgba(26, 26, 26, 0.15);
    --bs-success-light: rgba(0, 100, 0, 0.15);
    --bs-danger-light: rgba(139, 0, 0, 0.15);
    --bs-warning-light: rgba(184, 134, 11, 0.15);
    --bs-info-light: rgba(0, 0, 139, 0.15);
    --color-primary: #0000ee;
    --color-primary-light: rgba(0, 0, 238, 0.15);
    --color-secondary: #1a1a1a;
    --color-success: #006400;
    --color-success-light: rgba(0, 100, 0, 0.15);
    --color-danger: #8b0000;
    --color-danger-light: rgba(139, 0, 0, 0.15);
    --color-warning: #b8860b;
    --color-warning-light: rgba(184, 134, 11, 0.15);
    --color-info: #00008b;
    --color-border: #000000;
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-text-primary: #000000;
    --color-text-secondary: #1a1a1a;
    --color-text-muted: #1a1a1a;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
    --bs-link-color: #0000ee;
    --bs-link-hover-color: #0000cc;
    --hc-interactive-text: #000000;
    --hc-accent-text: #0000ee;
    --hc-contrast-text: #000000;
    --hc-surface-text: #000000;
}


[data-accessibility-highcontrast="true"][data-bs-theme="dark"] {
    --primary-color: #000000;
    --background-color: #0d0d0d;
    --navbar-background-color: #1a1a1a;
    --text-color: #ffffff;
    --nav-text-color: #ffffff;
    --nav-text-hover-color: #6eb9ff;
    --nav-header-color: #e6e6e6;
    --nav-header-hover-color: #9ed0ff;
    --nav-icon-color: #ffffff;
    --sidebar-heading-color: #e6e6e6;
    --sidebar-heading-hover-color: #6eb9ff;
    --icon-color: #ffffff;
    --devider-color: #ffffff;
    --devider-color-rgb: 255, 255, 255;
    --accent-color: #6eb9ff;
    --accent-color-rgb: 110, 185, 255;
    --bs-primary: #6eb9ff;
    --bs-primary-rgb: 110, 185, 255;
    --bs-secondary: #e6e6e6;
    --bs-secondary-rgb: 230, 230, 230;
    --bs-success: #00ff00;
    --bs-success-rgb: 0, 255, 0;
    --bs-danger: #ff6b6b;
    --bs-danger-rgb: 255, 107, 107;
    --bs-warning: #ffd700;
    --bs-warning-rgb: 255, 215, 0;
    --bs-info: #87ceeb;
    --bs-info-rgb: 135, 206, 235;
    --bs-light: #2d2d2d;
    --bs-dark: #ffffff;
    --bs-body-color: #ffffff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-bg: #000000;
    --bs-border-color: #ffffff;
    --bs-border-width: 2px;
    --bs-secondary-bg: #1a1a1a;
    --bs-secondary-color: #e6e6e6;
    --bs-card-bg: #000000;
    --bs-primary-light: rgba(110, 185, 255, 0.15);
    --bs-secondary-light: rgba(230, 230, 230, 0.15);
    --bs-success-light: rgba(0, 255, 0, 0.15);
    --bs-danger-light: rgba(255, 107, 107, 0.15);
    --bs-warning-light: rgba(255, 215, 0, 0.15);
    --bs-info-light: rgba(135, 206, 235, 0.15);
    --color-primary: #6eb9ff;
    --color-primary-light: rgba(110, 185, 255, 0.15);
    --color-secondary: #e6e6e6;
    --color-success: #00ff00;
    --color-success-light: rgba(0, 255, 0, 0.15);
    --color-danger: #ff6b6b;
    --color-danger-light: rgba(255, 107, 107, 0.15);
    --color-warning: #ffd700;
    --color-warning-light: rgba(255, 215, 0, 0.15);
    --color-info: #87ceeb;
    --color-border: #ffffff;
    --color-bg: #1a1a1a;
    --color-surface: #000000;
    --color-text-primary: #ffffff;
    --color-text-secondary: #e6e6e6;
    --color-text-muted: #e6e6e6;
    --shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.3);
    --shadow-md: 0 4px 10px rgba(255, 255, 255, 0.4);
    --shadow-lg: 0 8px 20px rgba(255, 255, 255, 0.5);
    --bs-link-color: #6eb9ff;
    --bs-link-hover-color: #9ed0ff;
    --hc-interactive-text: #ffffff;
    --hc-accent-text: #6eb9ff;
    --hc-contrast-text: #ffffff;
    --hc-surface-text: #ffffff;
}