/* ============================================================
UNTOUCHABLES.APP — OPERATIONS NOIR DESIGN SYSTEM
Version: 1.0
Design tokens, resets, typography, and foundational styles.
This file defines the entire visual language.
============================================================ */
/* --- Google Fonts ---
Include this in your :
*/
/* ============================================================
1. DESIGN TOKENS (CSS Custom Properties)
============================================================ */
:root {
/* --- Surfaces --- */
--void: #0c0d0f;
--surface-ground: #101114;
--surface-base: #141519;
--surface-raised: #1a1b21;
--surface-elevated: #1f2028;
--surface-overlay: #25262e;
--surface-hover: rgba(255, 255, 255, 0.03);
--surface-active: rgba(255, 255, 255, 0.06);
/* --- Borders --- */
--border-subtle: rgba(255, 255, 255, 0.04);
--border-default: rgba(255, 255, 255, 0.07);
--border-strong: rgba(255, 255, 255, 0.12);
--border-focus: rgba(196, 148, 58, 0.5);
/* --- Text --- */
--text-primary: #e8e4dc;
--text-secondary: #a8a49c;
--text-tertiary: #6b6860;
--text-nav: #918d85; /* navigation items — 5.2:1 contrast on dark surfaces */
--text-ghost: #4a4740;
--text-inverse: #0c0d0f;
/* --- Accent: Gold (authority, money, power) --- */
--gold-50: #faf3e3;
--gold-100: #f0ddb3;
--gold-200: #e2c47a;
--gold-400: #c4943a;
--gold-500: #a87b2e;
--gold-600: #8c6524;
--gold-700: #6b4d1b;
--gold-800: #4a3513;
--gold-900: #2e210c;
--gold-glow: rgba(196, 148, 58, 0.12);
/* --- Data: Steel Blue (intelligence, information) --- */
--steel-50: #e8eef5;
--steel-100: #bccde0;
--steel-200: #8eabc9;
--steel-400: #5c7a99;
--steel-500: #4a6580;
--steel-600: #3a5068;
--steel-700: #2b3d50;
--steel-800: #1e2b38;
--steel-900: #131c25;
/* --- Status: Danger (war, hospital, threat) --- */
--danger-50: #fce8e8;
--danger-100: #f5bcbc;
--danger-200: #e88a8a;
--danger-400: #c44040;
--danger-500: #a33333;
--danger-600: #832828;
--danger-700: #5e1c1c;
--danger-800: #3d1212;
/* --- Status: Active/Success (online, safe) --- */
--active-50: #e6f3ec;
--active-100: #b3dcc5;
--active-200: #7cc49e;
--active-400: #3d8c5c;
--active-500: #2e7049;
--active-600: #235838;
--active-700: #1a4029;
--active-800: #112b1b;
/* --- Status: Warning (traveling, caution) --- */
--warning-50: #fdf3e4;
--warning-100: #f5dbb0;
--warning-200: #edc07a;
--warning-400: #d4922e;
--warning-500: #b07924;
--warning-600: #8c601c;
--warning-700: #664614;
--warning-800: #40300e;
/* --- Status: Info (idle, jail, misc) --- */
--info-50: #e9edf4;
--info-100: #bcc5d8;
--info-200: #8e9dbb;
--info-400: #5a6a88;
--info-500: #48566e;
--info-600: #384356;
--info-700: #29323f;
--info-800: #1b2129;
/* --- Typography --- */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* --- Aliases for legacy ranked-war views (--accent-* + .font-mono utility).
The RW views were authored against an older design draft; map them onto
current tokens so colors and the mono font apply correctly. --- */
--accent-red: var(--danger-400);
--accent-green: var(--active-400);
--text-xs: 0.6875rem; /* 11px */
--text-sm: 0.75rem; /* 12px */
--text-base: 0.8125rem; /* 13px */
--text-md: 0.875rem; /* 14px */
--text-lg: 1rem; /* 16px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
--tracking-widest: 0.2em;
/* --- Spacing --- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
/* --- Layout --- */
--sidebar-width: 240px;
--sidebar-rail-width: 56px;
--header-height: 56px;
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-xl: 12px;
/* --- Transitions --- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 120ms;
--duration-normal: 200ms;
--duration-slow: 350ms;
/* --- Shadows (very subtle, used sparingly) --- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
--shadow-glow-gold: 0 0 20px rgba(196, 148, 58, 0.08);
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 400;
line-height: var(--leading-normal);
color: var(--text-primary);
background-color: var(--void);
min-height: 100vh;
}
a {
color: var(--gold-400);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
color: var(--gold-200);
}
img, svg {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
border: none;
outline: none;
}
::selection {
background: var(--gold-400);
color: var(--text-inverse);
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
/* --- Display / Headlines (Playfair Display) --- */
.t-display-lg {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 400;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.t-display {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 400;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.t-heading {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 500;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.t-subheading {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
line-height: var(--leading-tight);
color: var(--text-primary);
}
/* --- Section labels (monospace, uppercase, tracked) --- */
.t-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--text-tertiary);
}
.t-label-gold {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--gold-400);
}
/* --- Data / Numbers (JetBrains Mono) --- */
.t-data-xl {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: 500;
line-height: 1;
color: var(--text-primary);
}
.t-data-lg {
font-family: var(--font-mono);
font-size: var(--text-xl);
font-weight: 500;
line-height: 1;
color: var(--text-primary);
}
.t-data {
font-family: var(--font-mono);
font-size: var(--text-md);
font-weight: 400;
color: var(--text-primary);
}
.t-data-sm {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 400;
color: var(--text-secondary);
}
/* --- Body text (DM Sans) --- */
.t-body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--text-secondary);
}
.t-body-sm {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--text-tertiary);
}
/* --- Mono font utility (used by ranked-war views and live timers) --- */
.font-mono { font-family: var(--font-mono); }
/* --- Text colors --- */
.text-gold { color: var(--gold-400); }
.text-steel { color: var(--steel-400); }
.text-danger { color: var(--danger-400); }
.text-active { color: var(--active-400); }
.text-warning { color: var(--warning-400); }
.text-info { color: var(--info-400); }
.text-primary { color: var(--text-primary); }
.text-secondary{ color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-ghost { color: var(--text-ghost); }