/**
 * BruteForce AI - Design Tokens
 * Foundation Sprint Phase 1
 *
 * This file defines the design system's foundational tokens:
 * - Spacing scale
 * - Typography scale
 * - Border radius scale
 * - Shadow scale
 * - Additional semantic colors
 *
 * These tokens are used by other component CSS files.
 * Import this file BEFORE colors.css to ensure variables are available.
 */

:root {
    /* ============================================================
     * SPACING SCALE
     * Based on 4px base unit for consistent rhythm
     * ============================================================ */
    --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 */

    /* ============================================================
     * TYPOGRAPHY SCALE
     * Modular scale for consistent text sizing
     * ============================================================ */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */

    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ============================================================
     * BORDER RADIUS SCALE
     * Consistent corner rounding
     * ============================================================ */
    --radius-none: 0;
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-full: 9999px;

    /* ============================================================
     * SHADOW SCALE
     * Elevation levels for depth
     * ============================================================ */
    --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 -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);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Accent-colored shadows for branded elements */
    --shadow-primary: 0 2px 8px rgba(67, 56, 202, 0.3);    /* Indigo glow */
    --shadow-success: 0 2px 8px rgba(20, 184, 166, 0.3);   /* Teal/success glow */
    --shadow-primary-glow: 0 0 0 4px rgba(67, 56, 202, 0.3), 0 0 20px rgba(67, 56, 202, 0.2); /* Selection glow animation */

    /* ============================================================
     * SEMANTIC COLOR TOKENS
     * Extended color palette for UI states and semantics
     * These supplement the core colors defined in colors.css
     * ============================================================ */

    /* Error/Danger Colors */
    --color-error-50: #FEF2F2;
    --color-error-100: #FEE2E2;
    --color-error-500: #EF4444;
    --color-error-600: #DC2626;
    --color-error-700: #B91C1C;

    /* Warning Colors */
    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;

    /* Additional Primary shades (referenced in colors.css) */
    --color-primary-300: #A5B4FC;
    --color-primary-400: #818CF8;

    /* ============================================================
     * TEXT COLOR TOKENS
     * Semantic text colors for consistent typography
     * ============================================================ */
    --color-text-primary: #1C1917;      /* stone-900 - headings, important text */
    --color-text-secondary: #57534E;    /* stone-600 - body text */
    --color-text-tertiary: #78716C;     /* stone-500 - muted/helper text */
    --color-text-placeholder: #A8A29E;  /* stone-400 - placeholder text */

    /* ============================================================
     * SURFACE/BACKGROUND TOKENS
     * Semantic backgrounds for layering
     * ============================================================ */
    --color-surface: #FAFAF9;           /* stone-50 - page background */
    --color-surface-elevated: #FFFFFF;  /* white - cards, modals */
    --color-surface-hover: #F5F5F4;     /* stone-100 - hover states */
    --color-surface-active: #E7E5E4;    /* stone-200 - active/pressed states */

    /* ============================================================
     * BORDER TOKENS
     * Semantic border colors
     * ============================================================ */
    --color-border: #E7E5E4;            /* stone-200 - default borders */
    --color-border-light: #F5F5F4;      /* stone-100 - subtle borders */
    --color-border-strong: #D6D3D1;     /* stone-300 - emphasized borders */

    /* ============================================================
     * TRANSITION TOKENS
     * Consistent animation timing
     * ============================================================ */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* ============================================================
     * SEMANTIC THEME TOKENS
     * Complete token system for theme support
     * Light mode values (default)
     * ============================================================ */

    /* SURFACES - Background colors for different elevation levels */
    --surface-ground: #F5F5F4;          /* Page background, lowest level */
    --surface-default: #FAFAF9;         /* Default component background */
    --surface-elevated: #FFFFFF;        /* Cards, modals, elevated elements */
    --surface-overlay: rgba(0,0,0,0.5); /* Modal overlays */

    /* SURFACE STATES - Interactive surface colors */
    --surface-hover: #F5F5F4;           /* Hover state for surfaces */
    --surface-active: #E7E5E4;          /* Active/pressed state */
    --surface-selected: #EEF2FF;        /* Selected state (primary tint) */

    /* TEXT - Typography colors */
    --text-default: #1C1917;            /* Primary text, headings */
    --text-muted: #57534E;              /* Secondary text, body */
    --text-subtle: #78716C;             /* Tertiary text, captions */
    --text-disabled: #A8A29E;           /* Disabled text, placeholders */
    --text-inverse: #FFFFFF;            /* Text on dark backgrounds */
    --text-link: #0369a1;               /* Link text - blue */
    --text-link-hover: #0284c7;         /* Link hover */

    /* BORDERS - Edge colors */
    --border-default: #E7E5E4;          /* Default border */
    --border-muted: #F5F5F4;            /* Subtle border */
    --border-strong: #D6D3D1;           /* Emphasized border */
    --border-focus: #0369a1;            /* Focus ring color - blue */

    /* ACCENT PRIMARY - Brand color for primary actions (Blue) */
    --accent-primary: #0369a1;          /* Sky-700 - professional blue */
    --accent-primary-hover: #0284c7;    /* Sky-600 */
    --accent-primary-active: #0c4a6e;   /* Sky-900 */
    --accent-primary-light: #f0f9ff;    /* Sky-50 */
    --accent-primary-text: #FFFFFF;     /* Text on primary background */

    /* ACCENT SECONDARY - Coral for CTAs and energy moments */
    --accent-secondary: #FF6B6B;        /* Secondary/CTA color */
    --accent-secondary-hover: #FF5252;  /* Secondary hover */
    --accent-secondary-active: #E64545; /* Secondary active */
    --accent-secondary-light: #FFF1F2;  /* Secondary light background */
    --accent-secondary-text: #FFFFFF;   /* Text on secondary background */

    /* ACCENT TERTIARY - Teal for filter/category distinctions */
    --accent-tertiary: #0d9488;         /* Teal-600 */
    --accent-tertiary-hover: #14b8a6;   /* Teal-500 */
    --accent-tertiary-active: #0f766e;  /* Teal-700 */
    --accent-tertiary-light: #f0fdfa;   /* Teal-50 */
    --accent-tertiary-border: #2dd4bf;  /* Teal-400 - for borders */
    --accent-tertiary-text: #FFFFFF;    /* Text on tertiary background */

    /* OVERLAY TOKENS - Transparency levels for various overlays */
    --overlay-light: rgba(255, 255, 255, 0.95);      /* Light overlay (buttons on images) */
    --overlay-light-hover: rgba(255, 255, 255, 1);   /* Light overlay hover */
    --overlay-subtle: rgba(0, 0, 0, 0.2);            /* Subtle dark overlay */
    --overlay-medium: rgba(0, 0, 0, 0.5);            /* Medium dark overlay */
    --overlay-heavy: rgba(0, 0, 0, 0.75);            /* Heavy dark overlay */

    /* STATUS - Semantic status colors */
    --status-success: #14B8A6;
    --status-success-hover: #0D9488;    /* Teal-600 - hover state */
    --status-success-light: #F0FDFA;
    --status-success-text: #065F46;
    --status-warning: #F59E0B;
    --status-warning-hover: #D97706;    /* Amber-600 - hover state */
    --status-warning-light: #FFFBEB;
    --status-warning-text: #92400E;
    --status-error: #EF4444;
    --status-error-hover: #DC2626;      /* Red-600 - hover state */
    --status-error-light: #FEF2F2;
    --status-error-100: #FEE2E2;        /* Red-100 - lighter bg */
    --status-error-text: #B91C1C;
    --status-info: #6366F1;
    --status-info-hover: #4F46E5;       /* Indigo-600 - hover state */
    --status-info-light: #EEF2FF;
    --status-info-text: #3730A3;
}

/* ============================================================
 * DARK MODE THEME
 * Add class="dark" to <html> element to activate
 * ============================================================ */
:root.dark {
    /* SURFACES - Dark backgrounds */
    --surface-ground: #0F0F0F;
    --surface-default: #1C1917;
    --surface-elevated: #27272A;
    --surface-overlay: rgba(0,0,0,0.7);

    /* SURFACE STATES - Dark interactive states */
    --surface-hover: #27272A;
    --surface-active: #3F3F46;
    --surface-selected: #1e1b4b;

    /* TEXT - Light text on dark backgrounds */
    --text-default: #FAFAF9;
    --text-muted: #A1A1AA;
    --text-subtle: #71717A;
    --text-disabled: #52525B;
    --text-inverse: #1C1917;
    --text-link: #38bdf8;               /* Sky-400 - bright blue for dark mode */
    --text-link-hover: #7dd3fc;         /* Sky-300 */

    /* BORDERS - Dark borders */
    --border-default: #3F3F46;
    --border-muted: #27272A;
    --border-strong: #52525B;
    --border-focus: #38bdf8;            /* Sky-400 */

    /* ACCENT PRIMARY - Blue adjusted for dark mode visibility */
    --accent-primary: #38bdf8;          /* Sky-400 */
    --accent-primary-hover: #7dd3fc;    /* Sky-300 */
    --accent-primary-active: #0ea5e9;   /* Sky-500 */
    --accent-primary-light: #0c4a6e;    /* Sky-900 */
    --accent-primary-text: #0c4a6e;     /* Dark text on light blue */

    /* ACCENT SECONDARY - Coral stays vibrant on dark */
    --accent-secondary: #FF6B6B;
    --accent-secondary-hover: #FF8585;
    --accent-secondary-active: #FF5252;
    --accent-secondary-light: #450a0a;
    --accent-secondary-text: #FFFFFF;

    /* ACCENT TERTIARY - Teal adjusted for dark mode */
    --accent-tertiary: #2dd4bf;         /* Teal-400 */
    --accent-tertiary-hover: #5eead4;   /* Teal-300 */
    --accent-tertiary-active: #14b8a6;  /* Teal-500 */
    --accent-tertiary-light: #134e4a;   /* Teal-900 */
    --accent-tertiary-border: #2dd4bf;  /* Teal-400 */
    --accent-tertiary-text: #042f2e;    /* Dark text on light teal */

    /* OVERLAY TOKENS - Adjusted for dark mode */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-light-hover: rgba(255, 255, 255, 0.15);
    --overlay-subtle: rgba(0, 0, 0, 0.3);
    --overlay-medium: rgba(0, 0, 0, 0.7);
    --overlay-heavy: rgba(0, 0, 0, 0.85);

    /* Accent-colored shadows for dark mode - brighter for visibility */
    --shadow-primary: 0 2px 12px rgba(129, 140, 248, 0.4);  /* Indigo-400 glow */
    --shadow-success: 0 2px 12px rgba(45, 212, 191, 0.4);   /* Teal-400 glow */
    --shadow-primary-glow: 0 0 0 4px rgba(129, 140, 248, 0.4), 0 0 20px rgba(129, 140, 248, 0.3); /* Selection glow animation */

    /* STATUS - Adjusted for dark mode */
    --status-success: #2DD4BF;
    --status-success-hover: #5EEAD4;
    --status-success-light: #042f2e;
    --status-success-text: #5EEAD4;
    --status-warning: #FBBF24;
    --status-warning-hover: #FDE68A;
    --status-warning-light: #422006;
    --status-warning-text: #FDE68A;
    --status-error: #F87171;
    --status-error-hover: #FCA5A5;
    --status-error-light: #450a0a;
    --status-error-100: #7f1d1d;
    --status-error-text: #FECACA;
    --status-info: #818CF8;
    --status-info-hover: #A5B4FC;
    --status-info-light: #1e1b4b;
    --status-info-text: #C7D2FE;
}