:root {
    color-scheme: dark;
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;

    /* Base Obsidian Palette */
    --color-void: #060608;
    --color-void-2: #0a0a0d;
    --color-steel-1: #0f0f14;
    --color-steel-2: #14141c;
    --color-steel-3: #1c1c26;
    --color-ink: #ffffff;
    --color-ink-muted: #9ca3af;
    --color-ink-quiet: #6b7280;
    
    /* Primary Crimson / Red Accents */
    --color-red: #ef4444;
    --color-red-rgb: 239, 68, 68;
    --color-crimson: #dc2626;
    --color-crimson-rgb: 220, 38, 38;
    --color-crimson-dark: #991b1b;
    --color-crimson-deep: #450a0a;
    
    /* Mappings for existing component tokens */
    --color-cyan: #ef4444; /* Primary Accent: Radiant Crimson */
    --color-cyan-rgb: 239, 68, 68;
    
    --color-green: #f87171; /* Secondary Accent: Coral Red */
    --color-green-rgb: 248, 113, 113;
    
    --color-gold: #fca5a5; /* Tertiary Accent: Soft Rose-White */
    --color-gold-rgb: 252, 165, 165;
    
    --color-coral: #ef4444; /* Accent Red */
    --color-coral-rgb: 239, 68, 68;
    
    --color-blue: #f43f5e; /* Rose Highlight */
    --color-blue-rgb: 244, 63, 94;

    --color-danger: #ef4444;
    --color-success: #22c55e;

    /* Surfaces */
    --surface-page: var(--color-void);
    --surface-page-mid: var(--color-void-2);
    --surface-card: rgba(16, 16, 20, 0.78);
    --surface-card-strong: rgba(22, 22, 28, 0.9);
    --surface-card-muted: rgba(255, 255, 255, 0.04);
    --surface-card-hover: rgba(239, 68, 68, 0.06);
    --surface-overlay: rgba(7, 7, 9, 0.9);
    --surface-input: rgba(12, 12, 15, 0.85);
    --surface-media: #0d0d11;

    /* Borders & Edges */
    --edge-subtle: rgba(255, 255, 255, 0.08);
    --edge-strong: rgba(255, 255, 255, 0.16);
    --edge-hot: rgba(239, 68, 68, 0.45);
    --edge-good: rgba(248, 113, 113, 0.4);
    --edge-warm: rgba(252, 165, 165, 0.35);
    --edge-blue: rgba(244, 63, 94, 0.4);
    --edge-ghost: rgba(255, 255, 255, 0.06);
    --edge-red-glow: rgba(239, 68, 68, 0.3);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadows & Ambient Glows */
    --shadow-card: 0 20px 50px -10px rgba(0, 0, 0, 0.65);
    --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow-cyan: 0 0 25px rgba(239, 68, 68, 0.45);
    --shadow-glow-red: 0 0 35px rgba(239, 68, 68, 0.35);
    --shadow-glow-green: 0 0 20px rgba(248, 113, 113, 0.35);
    --shadow-glow-gold: 0 0 20px rgba(252, 165, 165, 0.3);

    /* Gradients */
    --gradient-page:
        radial-gradient(ellipse 900px 600px at 75% 10%, rgba(220, 38, 38, 0.25), transparent 70%),
        radial-gradient(ellipse 700px 500px at 15% 40%, rgba(185, 28, 28, 0.12), transparent 65%),
        radial-gradient(ellipse 850px 550px at 60% 75%, rgba(220, 38, 38, 0.16), transparent 70%),
        linear-gradient(180deg, #060608 0%, #09090e 50%, #060608 100%);
    --gradient-page-grid:
        repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.035) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.025) 0 1px, transparent 1px 64px);
    --gradient-card:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--surface-card);
    --gradient-card-cyan:
        linear-gradient(135deg, rgba(239, 68, 68, 0.12), transparent 50%),
        var(--surface-card);
    --gradient-card-green:
        linear-gradient(135deg, rgba(248, 113, 113, 0.12), transparent 50%),
        var(--surface-card);
    --gradient-card-blue:
        linear-gradient(135deg, rgba(244, 63, 94, 0.12), transparent 50%),
        var(--surface-card);
    --gradient-button-primary: linear-gradient(135deg, #ffffff, #e4e4e7);
    --gradient-button-red: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-meter: linear-gradient(90deg, var(--color-crimson), var(--color-red));
    --gradient-timeline: linear-gradient(var(--color-red), var(--color-crimson), var(--color-crimson-dark));

    --text-primary: #ffffff;
    --text-muted: #a1a1aa;
    --text-quiet: #71717a;
    --text-on-accent: #09090b;
    --text-cyan-soft: #fecdd3;
    --text-green-soft: #ffe4e6;
    --text-gold-soft: #fff1f2;
    --text-code: #ffffff;
    --text-chip: #e4e4e7;

    --accent-primary: var(--color-red);
    --accent-secondary: var(--color-crimson);
    --accent-tertiary: var(--color-gold);
    --accent-danger: var(--color-danger);
    --accent-info: var(--color-red);

    --pattern-panel:
        linear-gradient(90deg, rgba(239, 68, 68, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(239, 68, 68, 0.08) 1px, transparent 1px);
    --pattern-panel-size: 32px 32px;

    --transition-fast: 160ms ease;
    --transition-medium: 240ms ease;

    --bg: var(--surface-page);
    --bg-soft: var(--color-steel-1);
    --panel: var(--color-steel-2);
    --panel-strong: var(--color-steel-3);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --quiet: var(--text-quiet);
    --line: var(--edge-subtle);
    --line-strong: var(--edge-strong);
    --cyan: var(--accent-primary);
    --green: var(--accent-secondary);
    --gold: var(--accent-tertiary);
    --coral: var(--accent-danger);
    --blue: var(--accent-info);
    --shadow: var(--shadow-card);
}

* {
    box-sizing: border-box;
    letter-spacing: 0;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Sleek Crimson Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: var(--color-void);
}
::-webkit-scrollbar-thumb {
    background: rgba(239, 68, 68, 0.28);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(239, 68, 68, 0.55);
}

/* Premium Selection */
::selection {
    background: rgba(239, 68, 68, 0.35);
    color: #ffffff;
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--gradient-page);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--gradient-page-grid);
    mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 90%);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.03em;
}

p {
    margin: 0;
}

h1:focus {
    outline: none;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    padding: 1rem;
    color: var(--text-on-accent);
    background: color-mix(in srgb, var(--color-danger) 70%, var(--surface-overlay));
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: var(--edge-strong);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}