/* ============================================================ NEKO — Theme Token System · SATURATED MIDNIGHT v2 Single coherent Midnight liquid-glass theme. v2 keeps every v1 hue family but pushes ~10–20% more chroma into the accents and deepens the dark surfaces — richer, more alive, still premium and readable. Every color below is from the v2 palette (or an alpha derivation of one of its RGB values). No pure white/black, no off-palette hues. `.theme-sunlight` is retained ONLY as a backward-compatible alias that resolves to the exact Midnight v2 values. ============================================================ */ @font-face { font-family: "MinecraftTTF"; src: url("../assets/fonts/Minecraft.ttf") format("truetype"); font-display: swap; } /* Box-model reset for all themed surfaces */ .theme-sunlight, .theme-midnight, .theme-sunlight *, .theme-midnight *, .theme-sunlight *::before, .theme-midnight *::before, .theme-sunlight *::after, .theme-midnight *::after { box-sizing: border-box; } /* ============================================================ APPROVED MIDNIGHT PALETTE — raw reference (do not theme with these directly; use the semantic tokens below). ------------------------------------------------------------ Dark navy #0C1730 12,23,48 Navy #0A1C4A 10,28,74 Blue #1F6FE0 31,111,224 Light blue #76C5FF 118,197,255 Lilac #C48CF5 196,140,245 Purple #463A9E 70,58,158 Dark purple/navy #20227A 32,34,122 Gray #A6B0BC 166,176,188 Light gray #C7D0DA 199,208,218 Very light gray #D9E0E8 217,224,232 Ice gray #E8ECF3 232,236,243 Near white #F7F9FD 247,249,253 Brown gold #927524 146,117,36 Gold brown #C99F33 201,159,51 Gold yellow #F5C53C 245,197,60 Light yellow #F8D44E 248,212,78 Pastel yellow #FBE77E 251,231,126 Very light pink #FFDDE6 255,221,230 Light pink #FFB6D5 255,182,213 Vivid pink #FF6FB3 255,111,179 Dark pink #EE3F86 238,63,134 Black #080812 8,8,18 Black tone #0A0A16 10,10,22 Dark gray #191922 25,25,34 Gray dark #34343F 52,52,63 Medium gray #555562 85,85,98 ============================================================ */ :root { /* ---- Typography ---- */ --font-hero: "MinecraftTTF", "Pixelify Sans", monospace; --font-pixel: "Pixelify Sans", "MinecraftTTF", monospace; --font-body: "JetBrains Mono", monospace; /* ---- Scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- Pixel geometry ---- */ --px-step: 8px; /* stepped-corner notch size */ --px-step-sm: 5px; --radius-glass: 16px; /* softest allowed corner — navbar & glass pills */ --radius-glass-panel: 8px; /* L1 glass panels — restrained */ --radius-crisp: 0px; /* buttons, blocks, inputs — full block edge */ /* Stepped corner clip (1-notch, crisp Minecraft corner) */ --clip-step: polygon( 0 var(--px-step), var(--px-step) var(--px-step), var(--px-step) 0, calc(100% - var(--px-step)) 0, calc(100% - var(--px-step)) var(--px-step), 100% var(--px-step), 100% calc(100% - var(--px-step)), calc(100% - var(--px-step)) calc(100% - var(--px-step)), calc(100% - var(--px-step)) 100%, var(--px-step) 100%, var(--px-step) calc(100% - var(--px-step)), 0 calc(100% - var(--px-step)) ); --clip-step-sm: polygon( 0 var(--px-step-sm), var(--px-step-sm) var(--px-step-sm), var(--px-step-sm) 0, calc(100% - var(--px-step-sm)) 0, calc(100% - var(--px-step-sm)) var(--px-step-sm), 100% var(--px-step-sm), 100% calc(100% - var(--px-step-sm)), calc(100% - var(--px-step-sm)) calc(100% - var(--px-step-sm)), calc(100% - var(--px-step-sm)) 100%, var(--px-step-sm) 100%, var(--px-step-sm) calc(100% - var(--px-step-sm)), 0 calc(100% - var(--px-step-sm)) ); /* ---- Motion ---- */ --ease-snap: cubic-bezier(.2, .9, .3, 1.2); --dur-fast: 140ms; --dur-med: 220ms; } /* ============================================================ MIDNIGHT — the single active theme. `.theme-sunlight` is an alias kept only for backward compat; it now resolves to the identical Midnight token values. ============================================================ */ .theme-midnight, .theme-sunlight { color-scheme: dark; /* ---- Surfaces ---- */ --c-bg: #0C1730; --c-bg-rgb: 12, 23, 48; /* dark navy — page */ --c-bg-deep: #0A0A16; --c-bg-deep-rgb: 10, 10, 22; /* black tone — footer / deep */ --c-card: #0A1C4A; --c-card-rgb: 10, 28, 74; /* navy — primary card */ --c-card-2: #20227A; --c-card-2-rgb: 32, 34, 122; /* dark purple/navy — secondary card */ --c-accent-soft: #463A9E; --c-accent-soft-rgb: 70, 58, 158; /* purple — soft fill */ /* ---- Action & accents ---- */ --c-btn: #1F6FE0; --c-btn-rgb: 31, 111, 224; /* blue — primary action */ --c-accent: #76C5FF; --c-accent-rgb: 118, 197, 255; /* light blue — hover / glow / info */ --c-detail: #76C5FF; --c-detail-rgb: 118, 197, 255; --c-magic: #C48CF5; --c-magic-rgb: 196, 140, 245; /* lilac — magical / decorative */ --c-magic-deep: #463A9E; --c-magic-deep-rgb: 70, 58, 158; /* purple companion */ --c-gold: #F5C53C; --c-gold-rgb: 245, 197, 60; /* gold yellow — premium / VIP */ --c-gold-2: #C99F33; --c-gold-2-rgb: 201, 159, 51; /* gold brown */ --c-gold-deep: #927524; --c-gold-deep-rgb: 146, 117, 36;/* brown gold */ --c-pink: #FF6FB3; --c-pink-rgb: 255, 111, 179; /* vivid pink — special highlight */ --c-pink-soft: #FFB6D5; --c-pink-soft-rgb: 255, 182, 213; /* light pink */ /* ---- Text ---- */ --c-text: #F7F9FD; --c-text-rgb: 247, 249, 253; /* near white — primary */ --c-text-2: #C7D0DA; --c-text-2-rgb: 199, 208, 218; /* light gray — secondary (readable) */ --c-muted: #A6B0BC; --c-muted-rgb: 166, 176, 188; /* gray — metadata only */ /* ---- Lines ---- */ --c-border: #20227A; --c-border-rgb: 32, 34, 122; /* ---- Derived / functional ---- */ --c-btn-edge: #0A1C4A; /* navy — button bottom bevel */ --c-on-btn: #F7F9FD; /* near white — text on primary button */ --c-on-light: #0C1730; /* dark navy — text on light (gold/pink/light-blue) chips */ --c-vine: #76C5FF; /* light-blue ender shards (was vine green) */ --c-diyar: #FF6FB3; --c-diyar-rgb: 255, 111, 179; /* realm / heraldic — vivid pink */ --c-success: #76C5FF; --c-success-rgb: 118, 197, 255;/* success / online / active — light blue */ --c-danger: #EE3F86; --c-danger-rgb: 238, 63, 134; /* error — dark pink */ --c-danger-edge: #20227A; /* dark cool bevel under danger */ /* ---- Extended palette roles (every v2 color has a job) ---- */ --c-ice: #E8ECF3; --c-ice-rgb: 232, 236, 243; /* ice gray — brightest heading text on glass */ --c-soft: #D9E0E8; --c-soft-rgb: 217, 224, 232; /* very light gray — input text / bright hairline */ --c-gold-soft: #F8D44E; --c-gold-soft-rgb: 248, 212, 78; /* light yellow — premium hover / highlight */ --c-gold-pale: #FBE77E; --c-gold-pale-rgb: 251, 231, 126; /* pastel yellow — rare reward shimmer */ --c-pink-pale: #FFDDE6; --c-pink-pale-rgb: 255, 221, 230; /* very light pink — event-soft wash */ --c-black: #080812; --c-black-rgb: 8, 8, 18; /* black — deepest shadow / scrim */ --c-ink: #191922; --c-ink-rgb: 25, 25, 34; /* dark gray — code / console deep surface */ --c-line: #34343F; --c-line-rgb: 52, 52, 63; /* gray dark — strong divider / disabled fill */ --c-muted-2: #555562; --c-muted-2-rgb: 85, 85, 98; /* medium gray — disabled text / faint metadata */ /* ---- Liquid glass ---- */ /* L1 primary glass (navbar, login card, modals) */ --glass-bg: rgba(var(--c-card-rgb), 0.55); --glass-bg-strong: rgba(var(--c-bg-rgb), 0.74); /* L1 secondary glass (lilac/purple-tinted panels) */ --glass-bg-2: rgba(var(--c-card-2-rgb), 0.50); --glass-border: rgba(var(--c-accent-rgb), 0.22); --glass-border-soft: rgba(var(--c-text-rgb), 0.10); --glass-shine: rgba(var(--c-accent-rgb), 0.16); --glass-highlight: rgba(var(--c-text-rgb), 0.12); --glass-shadow: 0 10px 36px rgba(var(--c-bg-deep-rgb), 0.55), inset 0 1px 1px var(--glass-highlight); --glass-blur: blur(20px) saturate(140%); /* L2 frosted pixel panel */ --frost-bg: rgba(var(--c-card-2-rgb), 0.55); --frost-border: rgba(var(--c-accent-rgb), 0.20); --frost-blur: blur(12px) saturate(130%); /* L3 solid block */ --block-bg: var(--c-card); --block-border: rgba(var(--c-accent-rgb), 0.16); --block-shadow: rgba(var(--c-bg-deep-rgb), 0.55); --focus-ring: var(--c-accent); /* ---- Brief-requested semantic aliases (map onto the --c-* system) ---- */ --color-bg: var(--c-bg); --color-bg-deep: var(--c-bg-deep); --color-surface: var(--c-card); --color-surface-glass: var(--glass-bg); --color-surface-glass-strong: var(--glass-bg-strong); --color-border: var(--glass-border); --color-border-soft: var(--glass-border-soft); --color-text: var(--c-text); --color-text-muted: var(--c-muted); --color-primary: var(--c-btn); --color-primary-hover: var(--c-accent); --color-secondary: var(--c-card-2); --color-accent-magic: var(--c-magic); --color-accent-premium: var(--c-gold); --color-accent-pink: var(--c-pink); --color-focus: var(--focus-ring); --color-shadow: var(--block-shadow); background: var(--c-bg); color: var(--c-text); } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .theme-sunlight *, .theme-midnight * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }