/* ========================================
   THEME SYSTEM - Newtype v2 (permanently dark)
   ======================================== */

/* ========================================
   DESIGN TOKENS
   Single source of truth for all theme values.
   The site is permanently dark (Newtype v2).
   ======================================== */

:root {
    /* ── Newtype v2 palette ── */
    /* Primary accent: neon green */
    --color-primary: #2eff7e;
    --color-primary-dark: #1fd966;
    --color-primary-light: #6fffaa;

    /* Neon glow helpers */
    --neon: #2eff7e;
    --neon-glow: rgba(46, 255, 126, 0.38);
    --neon-glow-strong: rgba(46, 255, 126, 0.5);  /* hover/focus rings, pulse peaks */
    --neon-tint: rgba(46, 255, 126, 0.04);        /* subtle wash on table heads, hover bg, sitrep cells */

    /* Amber — warnings / embargoed / events */
    --amber: #ffb84d;
    --amber-glow: rgba(255, 184, 77, 0.35);

    /* Info cyan — errata / ruling flags */
    --info: #00d9ff;
    --info-glow: rgba(0, 217, 255, 0.4);

    --color-secondary: #d8f5e1;
    --color-secondary-dark: #87b599;
    --color-secondary-light: #ffffff;

    /* Status Colors */
    --color-success: #2eff7e;
    --color-success-light: #6fffaa;
    --color-success-dark: #1fd966;

    --color-error: #ff3b3b;
    --color-error-light: #ff6b6b;
    --color-error-dark: #cc0000;

    --color-warning: #ffb84d;
    --color-warning-light: #ffd080;
    --color-warning-dark: #d68910;

    --color-info: #00d9ff;
    --color-info-light: #40e8ff;
    --color-info-dark: #009ab8;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Card Type Colors */
    --type-unit: #2eff7e;
    --type-command: #ff3b3b;
    --type-event: #ffb84d;
    --type-base: #6fffaa;
    --type-unknown: #87b599;

    /* Card Game Colors - Official Gundam Card Game Colors */
    --card-color-red: #d01f10;
    --card-color-blue: #2c52b3;
    --card-color-green: #147e04;
    --card-color-purple: #6C3483;
    --card-color-yellow: #f1c40f;
    --card-color-white: #ecf0f1;
    --card-color-black: #2c3e50;

    /* Card Color Gradients (for darker shades) */
    --card-color-red-dark: #a01808;
    --card-color-blue-dark: #1f3d85;
    --card-color-green-dark: #0e5c03;
    --card-color-purple-dark: #4f2660;

    /* Gray Scale — remapped to neon-tinted darks */
    --gray-50: #2c2c2c;
    --gray-100: #333333;
    --gray-200: #3a3a3a;
    --gray-300: #444444;
    --gray-400: #555555;
    --gray-500: #666666;
    --gray-600: #bdc3c7;
    --gray-700: #ecf0f1;
    --gray-800: #ffffff;
    --gray-900: #ffffff;

    /* Color-gray aliases used by Newtype v2 components */
    --color-gray-50: #0b0f0a;
    --color-gray-100: #0f140d;
    --color-gray-200: #131910;
    --color-gray-300: rgba(46, 255, 126, 0.22);
    --color-gray-400: rgba(46, 255, 126, 0.35);
    --color-gray-500: #4a6657;
    --color-gray-600: #87b599;
    --color-gray-700: #d8f5e1;
    --color-gray-800: #ffffff;

    /* ========================================
       SEMANTIC THEME TOKENS
       ======================================== */

    /* Surface Colors (Backgrounds) */
    --surface-body: #1a1a1a;
    --surface-primary: #2c2c2c;
    --surface-secondary: #333333;
    --surface-tertiary: #3a3a3a;
    --surface-elevated: #2c2c2c;
    --surface-overlay: rgba(0, 0, 0, 0.8);

    /* Background aliases (Newtype v2) */
    --bg-body: #060805;
    --bg-container: #0b0f0a;
    --bg-section: #0f140d;
    --bg-filter: #131910;
    --bg-secondary: #0f140d;

    /* Newtype v2 short aliases.
       Promoted out of sealed_product_admin.css so any component CSS can
       use them directly without redefining the palette locally. Strip
       per-rule fallbacks like var(--text, #d8f5e1) once these resolve. */
    --bg: var(--bg-body);
    --bg-2: var(--bg-container);
    --panel: var(--bg-container);
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --text-3: var(--text-tertiary);
    --border: var(--border-color);
    --red: var(--color-error);
    --font-body: var(--font-family-primary);
    --font-display: var(--font-family-display);
    --font-mono: var(--font-family-mono);

    /* Text Colors */
    --text-primary: #d8f5e1;
    --text-secondary: #87b599;
    --text-tertiary: #4a6657;
    --text-muted: #4a6657;
    --text-disabled: #666666;
    --text-inverse: #2c3e50;

    /* Border Colors */
    --border-color: rgba(46, 255, 126, 0.22);
    --border-color-light: rgba(46, 255, 126, 0.14);
    --border-primary: rgba(46, 255, 126, 0.22);
    --border-secondary: #555555;
    --border-tertiary: #666666;
    --border-focus: var(--color-primary);
    --border-strong: rgba(46, 255, 126, 0.5);

    /* Interactive States */
    --interactive-hover: rgba(93, 173, 226, 0.15);
    --interactive-active: rgba(93, 173, 226, 0.25);
    --interactive-disabled: #3a3a3a;
    --hover-bg: rgba(46, 255, 126, 0.06);

    /* Status colour helpers — tinted backgrounds + on-tint text + hover
       aliases. These were used with var(--token, light-fallback) in
       legacy CSS; promoting them out so the rules resolve cleanly. */
    --color-primary-bg: rgba(46, 255, 126, 0.10);
    --color-primary-hover: var(--color-primary-dark);
    --color-success-bg: rgba(46, 255, 126, 0.10);
    --color-success-text: var(--color-success-dark);
    --color-warning-bg: rgba(255, 184, 77, 0.15);
    --color-warning-text: var(--color-warning-dark);
    --color-error-bg: rgba(255, 59, 59, 0.10);
    --color-error-text: var(--color-error-dark);
    --color-error-hover: var(--color-error-dark);
    --border-color-hover: var(--border-strong);
    --card-footer-bg: var(--bg-section);

    /* Link Colors */
    --link-color: var(--color-primary);
    --link-hover: var(--color-primary-dark);
    --link-visited: #bb8fce;
    --link-active: var(--color-primary-dark);

    /* Divider/Separator Colors */
    --divider-color: var(--border-primary);
    --divider-strong: var(--border-secondary);

    /* Overlay Colors */
    --overlay-light: rgba(0, 0, 0, 0.5);
    --overlay-medium: rgba(0, 0, 0, 0.75);
    --overlay-heavy: rgba(0, 0, 0, 0.9);

    /* Focus States */
    --focus-ring: 0 0 0 3px rgba(93, 173, 226, 0.4);
    --focus-ring-error: 0 0 0 3px rgba(231, 76, 60, 0.4);
    --focus-ring-success: 0 0 0 3px rgba(46, 204, 113, 0.4);

    /* Selection Colors */
    --selection-bg: rgba(93, 173, 226, 0.3);
    --selection-text: var(--text-primary);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);

    /* Component-Specific */
    --header-bg: var(--bg-body);
    --header-text: var(--color-white);

    --card-bg: #0b0f0a;
    --card-border: var(--border-primary);
    --card-shadow: var(--shadow-md);
    --panel-bg: var(--surface-primary);
    --modal-bg: #0b0f0a;

    --filter-bg: #131910;
    --filter-border: rgba(46, 255, 126, 0.22);
    --filter-padding: 16px 20px;

    --input-bg: var(--surface-tertiary);
    --input-border: var(--border-secondary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-tertiary);

    --button-primary-bg: var(--color-primary);
    --button-primary-hover: var(--color-primary-dark);
    --button-primary-text: #060805;

    --button-secondary-bg: #555555;
    --button-secondary-hover: #666666;
    --button-secondary-text: var(--color-white);

    --button-danger-bg: var(--color-error);
    --button-danger-hover: var(--color-error-dark);
    --button-danger-text: var(--color-white);

    --button-success-bg: var(--color-success);
    --button-success-hover: var(--color-success-dark);
    --button-success-text: #060805;

    /* Button aliases (Newtype v2) */
    --btn-primary-bg: #2eff7e;
    --btn-primary-bg-hover: #6fffaa;
    --btn-secondary-bg: #131910;
    --btn-secondary-bg-hover: rgba(46, 255, 126, 0.1);

    /* Page header */
    --page-header-bg: linear-gradient(135deg, #0b0f0a, #0f140d);
    --page-header-color: var(--text-primary);

    /* Table/List Colors */
    --table-header-bg: var(--surface-tertiary);
    --table-header-text: var(--gray-700);
    --table-row-bg: var(--surface-secondary);
    --table-row-alt-bg: var(--surface-tertiary);
    --table-row-hover-bg: var(--interactive-hover);
    --table-border: var(--border-primary);

    /* Badge/Pill Colors */
    --badge-bg-primary: var(--color-primary);
    --badge-text-primary: #060805;
    --badge-bg-secondary: var(--gray-400);
    --badge-text-secondary: var(--text-primary);
    --badge-bg-success: var(--color-success);
    --badge-text-success: #060805;
    --badge-bg-error: var(--color-error);
    --badge-text-error: var(--color-white);
    --badge-bg-warning: var(--color-warning);
    --badge-text-warning: #060805;

    /* Progress Bar Colors */
    --progress-bg: var(--gray-300);
    --progress-fill: var(--color-primary);
    --progress-success: var(--color-success);
    --progress-warning: var(--color-warning);
    --progress-error: var(--color-error);

    /* Tooltip Colors */
    --tooltip-bg: var(--gray-700);
    --tooltip-text: var(--text-primary);
    --tooltip-shadow: var(--shadow-lg);

    /* Dropdown Colors */
    --dropdown-bg: var(--surface-tertiary);
    --dropdown-border: var(--border-primary);
    --dropdown-shadow: var(--shadow-lg);
    --dropdown-item-hover-bg: var(--interactive-hover);
    --dropdown-item-active-bg: var(--interactive-active);

    /* Scrollbar Colors */
    --scrollbar-track: var(--surface-tertiary);
    --scrollbar-thumb: var(--border-strong);
    --scrollbar-thumb-hover: var(--neon);

    /* Spacing */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;

    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Typography — sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Typography — line heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.65;
    --line-height-loose: 1.85;

    /* Typography — weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Typography — families */
    --font-family-primary: 'Geist', system-ui, sans-serif;
    --font-family-display: 'Chakra Petch', sans-serif;
    --font-family-mono: 'JetBrains Mono', monospace;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Grid lines */
    --grid-line: rgba(46, 255, 126, 0.07);
}

/* ========================================
   BASE STYLES USING SEMANTIC TOKENS
   Apply these to components instead of hardcoded colors
   ======================================== */

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-family-primary);
    /* HUD grid background */
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: fixed;
}

/* Text selection styling */
::selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

::-moz-selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

/* Scrollbar styling (webkit browsers) */
::-webkit-scrollbar {
    background: var(--bg-body);
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-md);
    border-color: var(--bg-body);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}