/* =============================================================================
MODULE IMPORTS — must appear before any other rules (CSS spec requirement)
============================================================================= */
@import url('base.css');
@import url('typography.css');
@import url('layout.css');
@import url('panels.css');
@import url('cards.css');
@import url('forms.css');
@import url('navigation.css');
@import url('buttons.css');
@import url('badges.css');
@import url('modals.css');
@import url('tables.css');
@import url('utilities.css');
/**
* =============================================================================
* INDEX.CSS — Master Stylesheet Entry Point
* =============================================================================
* Load order matters. Bootstrap is assumed to be loaded BEFORE this file.
* This file owns: CSS custom properties (design tokens), then delegates
* all structural concerns to the module files below.
*
* Import chain:
* Bootstrap (external)
* ↓
* index.css ← you are here (tokens + orchestration)
* ↓
* base.css ← resets, root defaults, scrollbar, selection
* ↓
* typography.css ← type scale, headings, body, utility classes
* ↓
* layout.css ← grid system extensions, containers, spacing helpers
* ↓
* panels.css ← structural surface components (sidebar, hero, sections)
* ↓
* cards.css ← card variants and their internal anatomy
* ↓
* forms.css ← inputs, labels, validation states, fieldsets
* ↓
* navigation.css ← navbar, breadcrumbs, pagination, tabs
* ↓
* buttons.css ← button variants, sizes, states, icon-buttons
* ↓
* badges.css ← tags, labels, status indicators, chips
* ↓
* modals.css ← overlays, drawers, dialogs
* ↓
* tables.css ← data tables, sortable headers, row states
* ↓
* utilities.css ← atomic helpers not covered by Bootstrap
*
* =============================================================================
* THEMING STRATEGY
* =============================================================================
* All tokens live here on :root and optionally [data-theme="dark"].
* Module files reference ONLY var(--token-name). They must not hard-code
* any colour, font-family, size, or spacing value.
*
* To create a site-specific theme (bitmods, modsreloaded, etc.), override
* the tokens in a separate theme file loaded AFTER index.css:
*
*
*
*
* =============================================================================
*/
/* =============================================================================
SECTION 1 — COLOUR PALETTE TOKENS
Raw named colours. Not used directly in components — map them via roles.
============================================================================= */
:root {
/* --- Brand primaries — Bitmods aero green --- */
--color-brand-50: #f0fff4;
--color-brand-100: #c6f6d5;
--color-brand-200: #9ae6b4;
--color-brand-300: #68d391;
--color-brand-400: #48bb78;
--color-brand-500: #38a169; /* base brand */
--color-brand-600: #2f855a;
--color-brand-700: #276749;
--color-brand-800: #1c4532;
--color-brand-900: #0f2c20;
/* --- Accent — vivid electric green --- */
--color-accent-50: #f0fdf4;
--color-accent-100: #bbf7d0;
--color-accent-200: #86efac;
--color-accent-300: #4ade80;
--color-accent-400: #22c55e;
--color-accent-500: #16a34a; /* base accent */
--color-accent-600: #15803d;
--color-accent-700: #166534;
--color-accent-800: #14532d;
--color-accent-900: #052e16;
/* --- Neutral greys — cool dark-green tinted for aero glass --- */
--color-neutral-0: #ffffff;
--color-neutral-50: #f2f8f4;
--color-neutral-100: #e4efe8;
--color-neutral-200: #c8dfd0;
--color-neutral-300: #9cbfac;
--color-neutral-400: #6a9e80;
--color-neutral-500: #4a7a60;
--color-neutral-600: #355a47;
--color-neutral-700: #253f32;
--color-neutral-800: #172b22;
--color-neutral-850: #111f19;
--color-neutral-900: #0c1712;
--color-neutral-950: #070f0b;
--color-neutral-1000: #030807;
/* --- Semantic status colours --- */
--color-success-light: #d4edda;
--color-success: #28a745;
--color-success-dark: #155724;
--color-warning-light: #fff3cd;
--color-warning: #ffc107;
--color-warning-dark: #856404;
--color-danger-light: #f8d7da;
--color-danger: #dc3545;
--color-danger-dark: #721c24;
--color-info-light: #d1ecf1;
--color-info: #17a2b8;
--color-info-dark: #0c5460;
/* =============================================================================
SECTION 2 — SEMANTIC ROLE TOKENS
Maps palette tokens to functional roles. Components use THESE, not palette.
============================================================================= */
/* --- Surface hierarchy — dark aero glass base --- */
--surface-base: var(--color-neutral-900); /* page background — deep forest */
--surface-raised: var(--color-neutral-850); /* cards, panels */
--surface-overlay: var(--color-neutral-800); /* modals, dropdowns */
--surface-sunken: var(--color-neutral-950); /* input backgrounds, wells */
--surface-inverse: var(--color-neutral-50); /* inverted/light panels */
/* --- Border --- */
--border-subtle: var(--color-neutral-800);
--border-default: var(--color-neutral-700);
--border-strong: var(--color-brand-500);
--border-inverse: var(--color-neutral-300);
--border-focus: var(--color-accent-300);
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 20px;
--border-radius-pill: 9999px;
--border-radius-circle: 50%;
--border-width: 1px;
--border-width-thick: 2px;
/* --- Text roles — light on dark for aero dark base --- */
--text-primary: var(--color-neutral-50);
--text-secondary: var(--color-neutral-200);
--text-muted: var(--color-neutral-400);
--text-disabled: var(--color-neutral-600);
--text-inverse: var(--color-neutral-900);
--text-on-brand: var(--color-neutral-0);
--text-on-accent: var(--color-neutral-0);
--text-link: var(--color-accent-300);
--text-link-hover: var(--color-accent-200);
--text-link-visited: var(--color-brand-300);
/* --- Interactive states --- */
--state-hover-bg: rgba(56, 161, 105, 0.10);
--state-active-bg: rgba(56, 161, 105, 0.20);
--state-selected-bg: rgba(56, 161, 105, 0.18);
--state-disabled-opacity: 0.40;
--state-focus-ring: 0 0 0 3px rgba(74, 222, 128, 0.35);
/* --- Brand role mapping --- */
--brand-primary: var(--color-brand-500);
--brand-primary-hover: var(--color-brand-600);
--brand-primary-active: var(--color-brand-700);
--brand-primary-text: var(--text-on-brand);
--accent-primary: var(--color-accent-500);
--accent-primary-hover: var(--color-accent-600);
--accent-primary-active: var(--color-accent-700);
--accent-primary-text: var(--text-on-accent);
/* =============================================================================
SECTION 3 — TYPOGRAPHY TOKENS
============================================================================= */
/* --- Font families (set in theme file) --- */
--font-family-display: inherit; /* hero headings, logotype */
--font-family-heading: inherit; /* h1–h4 */
--font-family-body: inherit; /* p, li, td, general prose */
--font-family-ui: inherit; /* labels, buttons, nav items */
--font-family-mono: monospace; /* code, pre, kbd */
/* --- Type scale (Major Third — 1.250 ratio) --- */
--font-size-2xs: 0.64rem; /* 10.24px @ 16px root */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-md: 1rem; /* 16px — body base */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
--font-size-7xl: 4.5rem; /* 72px */
/* --- Font weights --- */
--font-weight-thin: 100;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* --- Line heights --- */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* --- Letter spacing --- */
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* =============================================================================
SECTION 4 — SPACING TOKENS
Base unit: 4px. Scale is multiplicative.
============================================================================= */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-3-5: 0.875rem; /* 14px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
--space-40: 10rem; /* 160px */
--space-48: 12rem; /* 192px */
--space-64: 16rem; /* 256px */
/* =============================================================================
SECTION 5 — LAYOUT & GRID TOKENS
============================================================================= */
--container-xs: 480px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-3xl: 1920px;
--container-padding-x: var(--space-4);
--container-padding-x-lg: var(--space-8);
--sidebar-width: 260px;
--sidebar-width-collapsed: 64px;
--topbar-height: 60px;
--footer-height: auto;
--grid-columns: 12;
--grid-gap: var(--space-6);
--grid-gap-sm: var(--space-4);
/* =============================================================================
SECTION 6 — SHADOW TOKENS
============================================================================= */
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--shadow-focus: var(--state-focus-ring);
/* =============================================================================
SECTION 7 — TRANSITION & ANIMATION TOKENS
============================================================================= */
--duration-instant: 0ms;
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 350ms;
--duration-sluggish: 500ms;
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--transition-base: all var(--duration-normal) var(--ease-in-out);
--transition-color: color var(--duration-fast) var(--ease-in-out),
background-color var(--duration-fast) var(--ease-in-out),
border-color var(--duration-fast) var(--ease-in-out);
--transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
--transition-transform: transform var(--duration-normal) var(--ease-spring);
/* =============================================================================
SECTION 8 — Z-INDEX LAYERS
Named layers prevent z-index wars.
============================================================================= */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-overlay: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-toast: 800;
--z-top: 900;
/* =============================================================================
SECTION 9 — COMPONENT-SPECIFIC TOKENS
Components pull from semantic tokens above, but expose their own slots
so themes can fine-tune one component without touching the global palette.
============================================================================= */
/* Cards */
--card-bg: var(--surface-raised);
--card-border-color: var(--border-subtle);
--card-border-radius: var(--border-radius-md);
--card-padding: var(--space-6);
--card-shadow: var(--shadow-sm);
--card-shadow-hover: var(--shadow-md);
/* Panels */
--panel-bg: var(--surface-raised);
--panel-border-color: var(--border-default);
--panel-border-radius: var(--border-radius-lg);
--panel-padding: var(--space-8);
--panel-shadow: var(--shadow-none);
/* Navigation */
--nav-bg: var(--surface-base);
--nav-border-color: var(--border-subtle);
--nav-height: var(--topbar-height);
--nav-link-color: var(--text-secondary);
--nav-link-color-active: var(--text-primary);
--nav-link-color-hover: var(--text-primary);
--nav-link-padding-x: var(--space-4);
--nav-link-padding-y: var(--space-2);
/* Sidebar */
--sidebar-bg: var(--surface-raised);
--sidebar-border-color: var(--border-subtle);
--sidebar-link-color: var(--text-secondary);
--sidebar-link-color-hover:var(--text-primary);
--sidebar-link-active-bg: var(--state-selected-bg);
/* Buttons */
--btn-border-radius: var(--border-radius-md);
--btn-font-weight: var(--font-weight-medium);
--btn-padding-x-sm: var(--space-3);
--btn-padding-y-sm: var(--space-1-5);
--btn-padding-x-md: var(--space-5);
--btn-padding-y-md: var(--space-2-5);
--btn-padding-x-lg: var(--space-7);
--btn-padding-y-lg: var(--space-3-5);
--btn-transition: var(--transition-color), var(--transition-shadow);
/* Forms */
--input-bg: var(--surface-sunken);
--input-border-color: var(--border-default);
--input-border-radius: var(--border-radius-md);
--input-padding-x: var(--space-3);
--input-padding-y: var(--space-2);
--input-font-size: var(--font-size-md);
--input-color: var(--text-primary);
--input-placeholder-color: var(--text-muted);
--input-focus-border: var(--border-focus);
--input-focus-shadow: var(--shadow-focus);
--input-disabled-bg: var(--color-neutral-200);
/* Tables */
--table-header-bg: var(--surface-sunken);
--table-border-color: var(--border-subtle);
--table-row-hover-bg: var(--state-hover-bg);
--table-stripe-bg: var(--color-neutral-50);
--table-cell-padding-x: var(--space-4);
--table-cell-padding-y: var(--space-3);
/* Badges */
--badge-border-radius: var(--border-radius-pill);
--badge-font-size: var(--font-size-xs);
--badge-font-weight: var(--font-weight-semibold);
--badge-padding-x: var(--space-2-5);
--badge-padding-y: var(--space-0-5);
/* Modals */
--modal-bg: var(--surface-overlay);
--modal-backdrop: rgba(0, 0, 0, 0.5);
--modal-border-radius: var(--border-radius-lg);
--modal-padding: var(--space-8);
--modal-shadow: var(--shadow-2xl);
--modal-max-width: 640px;
/* Tooltips */
--tooltip-bg: var(--surface-inverse);
--tooltip-color: var(--text-inverse);
--tooltip-border-radius: var(--border-radius-sm);
--tooltip-font-size: var(--font-size-xs);
--tooltip-padding-x: var(--space-2);
--tooltip-padding-y: var(--space-1);
/* =============================================================================
BITMODS AERO GREEN — Site-specific tokens
Glass surfaces, bevel highlights, neon glow, scanline texture.
============================================================================= */
/* Aero glass surfaces */
--aero-glass-bg: rgba(12, 23, 18, 0.72);
--aero-glass-border: rgba(74, 222, 128, 0.22);
--aero-glass-shine: rgba(74, 222, 128, 0.08);
--aero-glow-sm: 0 0 8px rgba(74, 222, 128, 0.30);
--aero-glow-md: 0 0 16px rgba(74, 222, 128, 0.40);
--aero-glow-lg: 0 0 32px rgba(74, 222, 128, 0.30),
0 0 64px rgba(56, 161, 105, 0.15);
/* Bevel highlights (top-left bright, bottom-right shadow) */
--bevel-light: rgba(74, 222, 128, 0.35);
--bevel-shadow: rgba(0, 0, 0, 0.60);
--bevel-border: 1px solid rgba(74, 222, 128, 0.25);
--bevel-inset: inset 0 1px 0 rgba(74, 222, 128, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.40);
--bevel-shadow-raised: 0 2px 0 rgba(0, 0, 0, 0.50),
inset 0 1px 0 rgba(74, 222, 128, 0.40);
/* Typography */
--font-family-display: 'Exo 2', 'Rajdhani', 'Orbitron', system-ui, sans-serif;
--font-family-heading: 'Exo 2', 'Rajdhani', system-ui, sans-serif;
--font-family-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
--font-family-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
/* Nav */
--nav-bg: rgba(7, 15, 11, 0.90);
--nav-border-color: rgba(74, 222, 128, 0.18);
/* Cards */
--card-bg: var(--aero-glass-bg);
--card-border-color: var(--aero-glass-border);
--card-shadow: var(--aero-glow-sm);
--card-shadow-hover: var(--aero-glow-md);
/* Panels */
--panel-bg: var(--aero-glass-bg);
--panel-border-color: var(--aero-glass-border);
/* Sidebar */
--sidebar-bg: rgba(7, 15, 11, 0.92);
--sidebar-border-color: rgba(74, 222, 128, 0.15);
} /* end :root */
/* =============================================================================
DARK THEME TOKEN OVERRIDES
Applied when or .theme-dark is present.
Override only the tokens that need to change — everything else inherits.
============================================================================= */
[data-theme="dark"],
.theme-dark {
--surface-base: var(--color-neutral-950);
--surface-raised: var(--color-neutral-900);
--surface-overlay: var(--color-neutral-850);
--surface-sunken: var(--color-neutral-1000);
--surface-inverse: var(--color-neutral-50);
--border-subtle: var(--color-neutral-800);
--border-default: var(--color-neutral-700);
--border-strong: var(--color-neutral-500);
--border-inverse: var(--color-neutral-300);
--text-primary: var(--color-neutral-50);
--text-secondary: var(--color-neutral-300);
--text-muted: var(--color-neutral-500);
--text-disabled: var(--color-neutral-700);
--text-inverse: var(--color-neutral-950);
--state-hover-bg: rgba(255, 255, 255, 0.05);
--state-active-bg: rgba(255, 255, 255, 0.10);
--state-selected-bg: rgba(255, 255, 255, 0.12);
--state-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.20);
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 8px 10px -6px rgba(0, 0, 0, 0.50);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.70);
}