/*!
 * Copyright (c) 2026 AbuEin Technologies — Salaheddin AbuEin <salaheddin@abuein.dev>
 * https://abuein.dev/
 * SPDX-License-Identifier: MIT
 */

@layer tokens {

    /* ===== Light theme — defaults ===== */
    :root {
        color-scheme: light;

        /* Brand */
        --color-primary: #84cc16;
        --color-primary-dark: #65a30d;
        --color-primary-light: #a3e635;
        --color-primary-muted: rgba(132, 204, 22, 0.1);
        --color-primary-emphasis: var(--color-primary-dark);

        /* Surfaces */
        --color-background: #ffffff;
        --color-background-alt: #f8fafc;
        --color-surface: #ffffff;
        --color-surface-elevated: #ffffff;
        --color-header-scrolled: rgba(255, 255, 255, 0.85);

        /* Text */
        --color-text: #0f172a;
        --color-text-secondary: #475569;
        --color-text-muted: #94a3b8;

        /* Borders */
        --color-border: #e2e8f0;
        --color-border-light: #f1f5f9;

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

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

        /* Radius */
        --radius-sm: 0.375rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --radius-full: 9999px;

        /* Transitions */
        --transition-fast: 150ms ease;
        --transition-base: 200ms ease;
        --transition-slow: 300ms ease;

        /* Typography */
        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-display: 'Space Grotesk', 'Inter', sans-serif;

        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;
        --text-5xl: 3rem;
        --text-6xl: 3.75rem;

        /* Z-Index */
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-fixed: 300;
        --z-modal-backdrop: 400;
        --z-modal: 500;
        --z-tooltip: 600;
    }

    /* ===== Dark theme — explicit user choice ===== */
    [data-theme="dark"] {
        color-scheme: dark;

        --color-primary-muted: rgba(132, 204, 22, 0.15);
        --color-primary-emphasis: var(--color-primary-light);

        --color-background: #0a0a0a;
        --color-background-alt: #111111;
        --color-surface: #171717;
        --color-surface-elevated: #1f1f1f;
        --color-header-scrolled: rgba(10, 10, 10, 0.85);

        --color-text: #fafafa;
        --color-text-secondary: #a1a1aa;
        --color-text-muted: #71717a;

        --color-border: #27272a;
        --color-border-light: #1f1f1f;

        --shadow-sm: 0 1px 2px 0 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);
    }

    /* ===== System fallback — only when JS hasn't set data-theme (no-JS users) ===== */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme]) {
            color-scheme: dark;

            --color-primary-muted: rgba(132, 204, 22, 0.15);
            --color-primary-emphasis: var(--color-primary-light);

            --color-background: #0a0a0a;
            --color-background-alt: #111111;
            --color-surface: #171717;
            --color-surface-elevated: #1f1f1f;
            --color-header-scrolled: rgba(10, 10, 10, 0.85);

            --color-text: #fafafa;
            --color-text-secondary: #a1a1aa;
            --color-text-muted: #71717a;

            --color-border: #27272a;
            --color-border-light: #1f1f1f;

            --shadow-sm: 0 1px 2px 0 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);
        }
    }
}