:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;

--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;

--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;

--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;

--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;

--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;

--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;

--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;

--radius: 0.5rem;

--input-border: #e4e4e7;
--zinc: #e4e4e7;
--zinc-50: #fafafa;

--sidebar-background: 0 0% 100%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;

/* Theme colors */
--surface-0: #ffffff;
--surface-0-hover: #f5f5f4; /* stone-100 */
--surface-0-active: #f0f0ef; /* stone-150 */
--surface-01: #f5f5f4; /* stone-100 */
--surface-01-hover: #f0f0ef; /* stone-150 */
--surface-01-active: #e7e5e4; /* stone-200 */
--surface-02: #f0f0ef; /* stone-150 */
--surface-02-hover: #e7e5e4; /* stone-200 */
--surface-02-active: #d6d3d1; /* stone-300 */
--surface-03: #dde9ee; /* frost-100 */

--border-0: #f0f0ef; /* stone-150 */
--border-01: #e7e5e4; /* stone-200 */
--border-02: #d6d3d1; /* stone-300 */
--border-03: #ada7a4; /* stone-400 */
--border-04: #78716c; /* stone-500 */

--base: #ffffff;

--text-title: #0b363f; /* aqua-850 */
--text-faint: #55666d; /* frost-700 */
--text-primary: #3a464b; /* frost-800 */
--text-strong: #080b0c;
--text-disabled: #7d95a1; /* frost-500 */
--text-high-contrast: #ffffff;
--text-tertiary: #bebabb;

--error-0: #b91c1c;
--success-0: #047857;
--warning-0: #f97316;
          
--primary-disabled: #71717A;
--primary-50: #CBF1F9;
--primary-100: #97E2EF;
--primary-200: #75D9E9;
--primary-300: #25BBD3;
--primary-400: #1F9CB0;
--primary-500: #1A8596;
--primary-600: #146573;
--primary-700: #115562;
--primary-800: #0E4651;
--primary-850: #0B363F;
--primary-900: #092F37;
--primary-950: #061F25;

--secondary-50: #EBF2F5;
--secondary-100: #DDE9EE;
--secondary-200: #CADBE2;
--secondary-300: #B6CED7;
--secondary-400: #A0BECA;
--secondary-500: #7D95A1;
--secondary-600: #64777E;
--secondary-700: #55666D;
--secondary-800: #3A464B;
--secondary-850: #293236;
--secondary-900: #1A2023;
--secondary-950: #0F1416;
}

.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;

--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;

--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;

--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;

--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;

--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;

--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;

--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;

/* Theme colors */
--surface-0: #0f1416; /* frost-950 */
--surface-0-hover: #1a2023; /* frost-900 */
--surface-0-active: #293236; /* frost-850 */
--surface-01: #1a2023; /* frost-900 */
--surface-01-hover: #293236; /* frost-850 */
--surface-01-active: #3a464b; /* frost-800 */
--surface-02: #293236; /* frost-850 */
--surface-02-hover: #3a464b; /* frost-800 */
--surface-02-active: #55666d; /* frost-700 */
--surface-03: #3a464b; /* frost-800 */

--border-0: #1a2023; /* frost-900 */
--border-01: #3a464b; /* frost-800 */
--border-02: #55666d; /* frost-700 */
--border-03: #64777e; /* frost-600 */
--border-04: #7d95a1; /* frost-500 */

--base: #080b0c;

--text-title: #ffffff;
--text-faint: #a0beca; /* frost-400 */
--text-primary: #dde9ee; /* frost-100 */
--text-strong: #ffffff;
--text-disabled: #3f3f46;
--text-high-contrast: #ffffff;
--text-tertiary: #bebabb;

--error-0: #f87171;
--success-0: #34d399;
--warning-0: #fb923c;
}

body {
    background-color: var(--background);
    font-family: 'Inter', sans-serif;
    margin: 0;
    font-size: 14px;
    box-sizing: border-box;
}