/* ==========================================================================
   SYSTEM DESIGN TOKENS
   A unified source of truth for the app's UI/UX styling.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ----------------------------------------------------------------------
       1. CORE BRAND COLORS
       The crimson/red anchor and secondary neutral palettes.
       ---------------------------------------------------------------------- */
    --color-primary: #a83232;
    --color-accent: #ff5555;
    --color-secondary: #3a3f44;
    --color-highlight: #e6b422;

    /* ----------------------------------------------------------------------
       2. SURFACE & BACKGROUND COLORS
       Dark mode defaults with glassmorphic support.
       ---------------------------------------------------------------------- */
    --bg-base: #121212;
    --bg-surface-elevated: rgba(16, 16, 17, 0.94);

    /* Glassmorphism Solid/Gradient Tiers */
    --glass-base: rgba(12, 12, 13, 0.72);
    --glass-light: rgba(18, 18, 19, 0.64);
    --glass-card-idle: rgba(22, 22, 23, 0.58);
    --glass-card-hover: rgba(32, 32, 34, 0.72);
    --glass-input: rgba(6, 6, 7, 0.62);

    /* ----------------------------------------------------------------------
       3. TEXT COLORS
       High-contrast and muted variants.
       ---------------------------------------------------------------------- */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-tertiary: rgba(255, 255, 255, 0.32);
    --text-inverse: #1a1a1a;

    /* ----------------------------------------------------------------------
       4. STATUS & SEMANTIC COLORS
       ---------------------------------------------------------------------- */
    --status-success: #4CAF50;
    --status-warning: #ffc107;
    --status-danger: #e53935;
    --status-danger-glow: rgba(255, 85, 85, 0.8);

    /* ----------------------------------------------------------------------
       5. BORDERS & DIVIDERS
       Subtle outlines and intelligent scanline glows.
       ---------------------------------------------------------------------- */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-moderate: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.22);
    --border-glow-primary: rgba(255, 85, 85, 0.4);
    --border-glow-subtle: rgba(255, 85, 85, 0.2);

    /* ----------------------------------------------------------------------
       6. SHADOWS & GLOWS
       Depth and active state illumination.
       ---------------------------------------------------------------------- */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 20px -10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 40px 100px -10px rgba(0, 0, 0, 0.8);

    --shadow-inner-subtle: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    --shadow-inner-strong: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    --glow-primary: 0 0 24px rgba(168, 50, 50, 0.35);
    --glow-accent: 0 0 12px var(--color-accent);

    /* ----------------------------------------------------------------------
       7. TYPOGRAPHY
       ---------------------------------------------------------------------- */
    --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* Fluid Typography Scales (Clamp) */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: clamp(1.4rem, 3vw, 1.6rem);
    --text-2xl: clamp(1.8rem, 4vw, 2.5rem);
    --text-3xl: clamp(2rem, 5vw, 3.5rem);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    /* ----------------------------------------------------------------------
       8. RADII / BORDER-RADIUS
       ---------------------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ----------------------------------------------------------------------
       9. SPACING (Margins & Padding)
       ---------------------------------------------------------------------- */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;

    /* ----------------------------------------------------------------------
       10. ANIMATIONS & TRANSITIONS
       ---------------------------------------------------------------------- */
    --ease-in-out: ease-in-out;
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-fast: 0.15s;
    --duration-medium: 0.3s;
    --duration-slow: 0.6s;
    --duration-boot: 0.8s;

    --transition-fast: var(--duration-fast) var(--ease-in-out);
    --transition-medium: var(--duration-medium) var(--ease-spring);

    /* ----------------------------------------------------------------------
       11. Z-INDEX SCALE
       ---------------------------------------------------------------------- */
    --z-background: -3;
    --z-mask: -2;
    --z-overlay: -1;
    --z-base: 1;
    --z-nav: 10;
    --z-dock: 100;
    --z-modal: 250;

    /* ----------------------------------------------------------------------
       12. REUSABLE GRADIENTS
       ---------------------------------------------------------------------- */
    --gradient-primary-btn: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-card-idle: linear-gradient(
            180deg,
            rgba(24, 18, 20, 0.76),
            rgba(8, 8, 10, 0.9)
    );
    --gradient-card-active: linear-gradient(
            180deg,
            rgba(168, 50, 50, 0.16),
            rgba(10, 10, 11, 0.9)
    );
    --gradient-text-shimmer: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.75) 100%);
}