/* Design Tokens - CSS Custom Properties */

:root {
    /* ========================================
       FONT SELECTION
       Change these values to try different font combinations
       ======================================== */

    /* Body Font Options: 'Inter', 'IBM Plex Sans', 'Source Sans Pro', 'Manrope' */
    --font-body: 'Inter';
    --font-body-category: sans-serif; /* Font category for fallback: sans-serif, serif, or monospace */

    /* Heading Font Options: 'Satoshi', 'Poppins', 'Inter' */
    --font-heading: 'Satoshi';
    --font-heading-category: sans-serif; /* Font category for fallback: sans-serif, serif, or monospace */

    /* Monospace Font Options: 'Custom Mono', 'Fira Code', 'JetBrains Mono', 'IBM Plex Mono' */
    --font-code: 'Custom Mono';
    --font-code-category: monospace; /* Font category for fallback: sans-serif, serif, or monospace */

    /* ======================================== */

    /* Colors */
    /* Text Colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
    --color-text-muted: var(--color-gray-600);

    /* Semantic Colors */
    --color-muted: var(--color-gray-500);
    --color-dark: var(--color-gray-900);

    /* Brand & State Colors */
    --color-accent: #008080;
    --color-accent-light: #E8F4F4;
    --color-accent-bg: #E8F4F4;
    --color-accent-dark: #006666;
    --color-success: #28a745;
    --color-success-dark: #218838;
    --color-success-bg-light: #d4edda;
    --color-success-border: #c3e6cb;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-warning: #ffc107;
    --color-warning-text: var(--alert-warning-text);
    --color-warning-text-dark: #b45309;
    --color-warning-bg: var(--alert-warning-bg);
    --color-warning-border: var(--alert-warning-border);
    --color-info: #17a2b8;

    /* Eth-Aurora Gradient Colors */
    /* For light backgrounds (saturated, mid-tone colors for high contrast) */
    --eth-aurora-color-1-light: #5B5ECC;  /* Deep Periwinkle */
    --eth-aurora-color-2-light: #C438E6;  /* Rich Magenta */
    --eth-aurora-color-3-light: #00A8A8;  /* Ocean Teal (darker variant for better contrast) */
    /* Alternative: #6CE1E6 (Muted Aqua - lighter, less contrast) */

    /* For dark backgrounds (brighter, luminous colors) */
    --eth-aurora-color-1-dark: #B8BBFF;   /* Lavender Blue */
    --eth-aurora-color-2-dark: #FF9EFF;   /* Light Fuchsia */
    --eth-aurora-color-3-dark: #6CE1E6;   /* Muted Aqua */

    /* Eth-Aurora Gradient - 70° angle (light theme) */
    --eth-aurora-gradient-70deg: linear-gradient(
        70deg,
        var(--eth-aurora-color-1-light) 0%,      /* Deep Periwinkle */
        var(--eth-aurora-color-2-light) 33.33%,  /* Rich Magenta */
        var(--eth-aurora-color-3-light) 66.67%,  /* Ocean Teal */
        var(--eth-aurora-color-1-light) 100%     /* Loop back to periwinkle */
    );

    /* Utility Colors */
    --color-focus-border: #80bdff;

    /* Gray Scale Colors */
    --color-gray-100: #F5F5F7;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    /* Background Colors */
    --color-background-soft: var(--color-gray-100);
    --color-white: #FFFFFF;
    --color-herald-bg: #F9FFFE;
    --color-comment-bg-default: var(--color-white);

    /* Alert Colors - Text, Background, Border */
    --alert-success-text: #155724;
    --alert-success-bg: #d4edda;
    --alert-success-border: #c3e6cb;

    --alert-danger-text: #721c24;
    --alert-danger-bg: #f8d7da;
    --alert-danger-border: #f5c6cb;

    --alert-info-text: #0c5460;
    --alert-info-bg: #d1ecf1;
    --alert-info-border: #bee5eb;

    --alert-warning-text: #b45309;
    --alert-warning-bg: #fff3cd;
    --alert-warning-border: #ffc107;

    /* Typography */
    --font-family-base: var(--font-body), var(--font-body-category), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-headings: var(--font-heading), var(--font-heading-category), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: var(--font-code), ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    --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-size-4xl: 2.5rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* Heading Sizes - Independent from body text scale */
    --heading-size-h1: 2rem;      /* 32px */
    --heading-size-h2: 1.75rem;
    --heading-size-h3: 1.5rem;
    --heading-size-h4: 1.25rem;
    --heading-size-h5: --font-size-base;
    --heading-size-h6: --font-size-base;

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

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Borders */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-color: var(--color-gray-300);
    --border-color-light: var(--color-gray-200);
    --border-color-dark: var(--color-gray-400);

    /* Box Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Z-Index Scale */
    --z-auto: auto;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-100: 100;
    --z-200: 200;

    /* Breakpoints (for reference in media queries) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* Container Max Widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;

    /* Layout Heights */
    --navbar-height: 61px;  /* Calculated: 12px top + 30px content + 12px bottom + 1px border + 6px shadow */

    /* Universal Grid Layout Widths */
    --layout-sidebar-common-width: clamp(250px, 22vw, 350px);  /* Master variable for both sidebars (ensures symmetry) */
    --layout-sidebar-width: var(--layout-sidebar-common-width);
    --layout-content-width: 900px;
    --layout-content-min-width: 500px;  /* Minimum readable width before layout changes */
    --layout-container-max: 1200px;
    --notification-max-width: 700px;  /* Maximum width for notification overlays */

    /* Three-Column Layout Widths */
    --layout-right-sidebar-width: var(--layout-sidebar-common-width);
    --layout-three-column-content-width: 900px;
    --layout-three-column-total-width: 1600px; /* 350 + 900 + 350 */

    /* Responsive Breakpoints */
    --layout-two-column-breakpoint: 1024px;  /* Single breakpoint: desktop (>=1024) vs mobile (<1024) */
}