133 lines
2.8 KiB
CSS
133 lines
2.8 KiB
CSS
@layer base {
|
|
:root {
|
|
--bg0: #0a0e1a;
|
|
--bg1: #0f1524;
|
|
--bg2: #121929;
|
|
--bg3: #1a2236;
|
|
--bgH: #1e2844;
|
|
--bd: #1e2a42;
|
|
--bdL: #2a3a5c;
|
|
--t1: #edf0f7;
|
|
--t2: #b0b8cc;
|
|
--t3: #8690a6;
|
|
--blue: #3b82f6;
|
|
--cyan: #06b6d4;
|
|
--red: #ef4444;
|
|
--orange: #f97316;
|
|
--yellow: #eab308;
|
|
--green: #22c55e;
|
|
--purple: #a855f7;
|
|
--boom: #f59e0b;
|
|
--boomH: #fbbf24;
|
|
--fK: Noto Sans KR, sans-serif;
|
|
--fM: JetBrains Mono, monospace;
|
|
--rS: 6px;
|
|
--rM: 8px;
|
|
|
|
/* === Design Token System === */
|
|
|
|
/* Static */
|
|
--static-black: #131415;
|
|
--static-white: #ffffff;
|
|
|
|
/* Gray */
|
|
--gray-100: #f1f5f9;
|
|
--gray-200: #e2e8f0;
|
|
--gray-300: #cbd5e1;
|
|
--gray-400: #94a3b8;
|
|
--gray-500: #64748b;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-800: #1e293b;
|
|
--gray-900: #0f172a;
|
|
--gray-1000: #020617;
|
|
|
|
/* Blue */
|
|
--blue-100: #dbeafe;
|
|
--blue-200: #bfdbfe;
|
|
--blue-300: #93c5fd;
|
|
--blue-400: #60a5fa;
|
|
--blue-500: #3b82f6;
|
|
--blue-600: #2563eb;
|
|
--blue-700: #1d4ed8;
|
|
--blue-800: #1e40af;
|
|
--blue-900: #1e3a8a;
|
|
--blue-1000: #172554;
|
|
|
|
/* Green */
|
|
--green-100: #dcfce7;
|
|
--green-200: #bbf7d0;
|
|
--green-300: #86efac;
|
|
--green-400: #4ade80;
|
|
--green-500: #22c55e;
|
|
--green-600: #16a34a;
|
|
--green-700: #15803d;
|
|
--green-800: #166534;
|
|
--green-900: #14532d;
|
|
--green-1000: #052e16;
|
|
|
|
/* Yellow */
|
|
--yellow-100: #fef9c3;
|
|
--yellow-200: #fef08a;
|
|
--yellow-300: #fde047;
|
|
--yellow-400: #facc15;
|
|
--yellow-500: #eab308;
|
|
--yellow-600: #ca8a04;
|
|
--yellow-700: #a16207;
|
|
--yellow-800: #854d0e;
|
|
--yellow-900: #713f12;
|
|
--yellow-1000: #422006;
|
|
|
|
/* Red */
|
|
--red-100: #fee2e2;
|
|
--red-200: #fecaca;
|
|
--red-300: #fca5a5;
|
|
--red-400: #f87171;
|
|
--red-500: #ef4444;
|
|
--red-600: #dc2626;
|
|
--red-700: #b91c1c;
|
|
--red-800: #991b1b;
|
|
--red-900: #7f1d1d;
|
|
--red-1000: #450a0a;
|
|
|
|
/* Purple */
|
|
--purple-100: #f3e8ff;
|
|
--purple-200: #e9d5ff;
|
|
--purple-300: #d8b4fe;
|
|
--purple-400: #c084fc;
|
|
--purple-500: #a855f7;
|
|
--purple-600: #9333ea;
|
|
--purple-700: #7e22ce;
|
|
--purple-800: #6b21a8;
|
|
--purple-900: #581c87;
|
|
--purple-1000: #3b0764;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Outfit', 'Noto Sans KR', sans-serif;
|
|
background: var(--bg0);
|
|
color: var(--t1);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Date input calendar icon — white for dark theme */
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
}
|
|
input[type="date"]::-webkit-calendar-picker-indicator:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|