/* ==========================================================================
   HardcoreVault Frontend — Design Tokens
   Based on the shared token system from the fleet.
   Brand overrides (red/crimson) applied at the bottom of :root.
   ========================================================================== */

:root {

    --color-white:                  rgba(255, 255, 255, 1);

    --color-bg-primary:             rgba(8, 8, 12, 1);
    --color-bg-surface:             rgba(18, 18, 24, 1);
    --color-bg-elevated:            rgba(28, 28, 36, 1);
    --color-bg-overlay:             rgba(0, 0, 0, 0.7);

    --color-border:                 rgba(45, 45, 60, 1);
    --color-border-hover:           rgba(96, 165, 250, 1);

    --color-text-primary:           rgba(250, 250, 255, 1);
    --color-text-secondary:         rgba(170, 170, 190, 1);
    --color-text-muted:             rgba(120, 120, 140, 1);
    --color-text-accent:            rgba(96, 165, 250, 1);

    --color-accent:                 rgba(96, 165, 250, 1);
    --color-accent-hover:           rgba(59, 130, 246, 1);
    --color-accent-active:          rgba(37, 99, 235, 1);
    --color-accent-subtle:          rgba(96, 165, 250, 0.2);

    --color-cta-bg:                 rgba(59, 130, 246, 1);
    --color-cta-bg-hover:           rgba(37, 99, 235, 1);
    --color-cta-text:               rgba(255, 255, 255, 1);

    --color-info:                   #3b82f6;

    --color-overlay-dark:           rgba(0, 0, 0, 0.92);
    --color-overlay-age-gate:       rgba(4, 4, 8, 0.97);

    --color-white-04:               rgba(255, 255, 255, 0.04);
    --color-white-08:               rgba(255, 255, 255, 0.08);
    --color-white-10:               rgba(255, 255, 255, 0.1);
    --color-white-50:               rgba(255, 255, 255, 0.5);
    --color-white-65:               rgba(255, 255, 255, 0.65);
    --color-white-75:               rgba(255, 255, 255, 0.75);
    --color-white-90:               rgba(255, 255, 255, 0.9);
    --color-black-75:               rgba(0, 0, 0, 0.75);

    --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono:   'SF Mono', Monaco, Consolas, 'Courier New', monospace;

    --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;

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    --leading-tight:   1.25;
    --leading-snug:    1.4;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    --spacing-1:    0.25rem;
    --spacing-2:    0.5rem;
    --spacing-3:    0.75rem;
    --spacing-4:    1rem;
    --spacing-5:    1.25rem;
    --spacing-6:    1.5rem;
    --spacing-8:    2rem;
    --spacing-10:   2.5rem;
    --spacing-12:   3rem;
    --spacing-16:   4rem;
    --spacing-20:   5rem;

    --radius-sm:    0.25rem;
    --radius-md:    0.375rem;
    --radius-lg:    0.5rem;
    --radius-xl:    0.75rem;
    --radius-2xl:   1rem;
    --radius-full:  9999px;

    --size-focus-ring:      3px;
    --width-container:      1200px;

    --content-max-width-prose: 680px;
    --content-max-width-modal: 440px;

    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:           0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg:           0 10px 15px rgba(0, 0, 0, 0.6);
    --shadow-ring-accent:  0 0 0 3px rgba(96, 165, 250, 0.3);
    --shadow-modal:        0 32px 64px rgba(0, 0, 0, 0.6);
    --shadow-dropdown:     0 8px 24px rgba(0, 0, 0, 0.45);

    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.3s ease-out;

    --header-height: 56px;

    --z-dropdown:   100;
    --z-header:     200;
    --z-sidebar:    200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-tooltip:    500;
    --z-age-gate:   9999;

    /* ==========================================================================
       HardcoreVault — Brand Overrides (red/crimson)
       ========================================================================== */

    --color-bg-primary:      rgba(6, 4, 4, 1);
    --color-bg-surface:      rgba(16, 10, 10, 1);
    --color-bg-elevated:     rgba(28, 14, 14, 1);

    --color-accent:          rgba(220, 38, 38, 1);
    --color-accent-hover:    rgba(185, 28, 28, 1);
    --color-accent-active:   rgba(153, 27, 27, 1);
    --color-accent-subtle:   rgba(220, 38, 38, 0.18);

    --color-cta-bg:          rgba(220, 38, 38, 1);
    --color-cta-bg-hover:    rgba(185, 28, 28, 1);

    --color-text-accent:     rgba(248, 113, 113, 1);
    --color-border-hover:    rgba(220, 38, 38, 1);

    --shadow-ring-accent:    0 0 0 3px rgba(220, 38, 38, 0.3);
}