/*
 * Design Tokens for roolcraft
 * Customize colors, typography, and spacing here.
 * These values are used by Tailwind CSS.
 *
 * COLOR SYSTEM:
 * - Jet + Porcelain do the heavy lifting
 * - Dark Teal supports structure
 * - Neon only speaks when something matters (use sparingly!)
 */

:root {
    /* =================================================================
       BRAND COLORS
       ================================================================= */

    /* Jet - Foundation color (#0E1F1F)
       Use for: main backgrounds, app shells, nav bars, footers */
    --color-jet: #0E1F1F;
    --color-jet-light: #1a2e2e;
    --color-jet-dark: #0a1515;

    /* Porcelain - Readability color (#FAFAF5)
       Use for: text on dark bg, cards, modals, content panels, form fields */
    --color-porcelain: #FAFAF5;
    --color-porcelain-dark: #f0f0eb;

    /* Dark Teal - Structure & depth (#0F4C5C)
       Use for: secondary backgrounds, cards, dividers, icons, charts, data viz */
    --color-teal: #0F4C5C;
    --color-teal-light: #1a6b7a;
    --color-teal-dark: #0a3640;

    /* Neon - Attention-grabber (#E6FF1A) - USE SPARINGLY!
       Use for: primary CTAs, active states, selected tabs, key data points,
                status indicators, logo accents, social highlights
       NEVER use for: body text or full backgrounds */
    --color-neon: #E6FF1A;
    --color-neon-dark: #c4d916;
    --color-neon-glow: rgba(230, 255, 26, 0.3);

    /* Grey Olive - Hierarchy & utility (#8F9391)
       Use for: secondary text, labels, timestamps, disabled states, borders */
    --color-olive: #8F9391;
    --color-olive-light: #a8aba9;
    --color-olive-dark: #6b6d6c;

    /* =================================================================
       SEMANTIC MAPPINGS (for Tailwind compatibility)
       ================================================================= */

    /* Primary = Neon (for CTAs, active states) */
    --color-primary-50: #fcffe6;
    --color-primary-100: #f7ffb3;
    --color-primary-200: #f2ff80;
    --color-primary-300: #edff4d;
    --color-primary-400: #e6ff1a;
    --color-primary-500: #E6FF1A;
    --color-primary-600: #c4d916;
    --color-primary-700: #a3b312;
    --color-primary-800: #828c0e;
    --color-primary-900: #61660a;
    --color-primary-950: #404006;

    /* Secondary = Dark Teal (for structure, depth) */
    --color-secondary-50: #e6f2f5;
    --color-secondary-100: #cce5eb;
    --color-secondary-200: #99cbd7;
    --color-secondary-300: #66b1c3;
    --color-secondary-400: #3397af;
    --color-secondary-500: #0F4C5C;
    --color-secondary-600: #0d4150;
    --color-secondary-700: #0a3640;
    --color-secondary-800: #082a33;
    --color-secondary-900: #051f26;
    --color-secondary-950: #031419;

    /* Accent = Grey Olive (for utility, hierarchy) */
    --color-accent-50: #f5f5f5;
    --color-accent-100: #e8e9e8;
    --color-accent-200: #d1d2d1;
    --color-accent-300: #babcbb;
    --color-accent-400: #a8aba9;
    --color-accent-500: #8F9391;
    --color-accent-600: #767a78;
    --color-accent-700: #5d615f;
    --color-accent-800: #444746;
    --color-accent-900: #2b2e2d;
    --color-accent-950: #121414;

    /* Typography */
    --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: var(--font-body);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Spacing */
    --spacing-unit: 0.25rem;

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

    /* =================================================================
       GRADIENTS
       ================================================================= */
    --gradient-hero: linear-gradient(135deg, var(--color-jet) 0%, var(--color-teal) 100%);
    --gradient-card: linear-gradient(180deg, var(--color-teal) 0%, var(--color-jet) 100%);
    --gradient-button: linear-gradient(90deg, var(--color-neon) 0%, var(--color-neon-dark) 100%);
    --gradient-button-hover: linear-gradient(90deg, var(--color-neon-dark) 0%, var(--color-neon) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-light) 100%);
    --gradient-neon-glow: radial-gradient(ellipse at center, var(--color-neon-glow) 0%, transparent 70%);

    /* =================================================================
       BACKGROUND COLORS
       ================================================================= */
    --bg-page: var(--color-jet);
    --bg-surface: var(--color-teal);
    --bg-elevated: var(--color-porcelain);
    --bg-card: var(--color-porcelain);

    /* =================================================================
       TEXT COLORS
       ================================================================= */
    --text-primary: var(--color-porcelain);
    --text-secondary: var(--color-olive);
    --text-on-light: var(--color-jet);
    --text-accent: var(--color-neon);
}

/* Dark mode (optional - uncomment to enable) */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary-600: #3b82f6;
    }
}
*/