@layer core {
    :root {
        /* ======================================
    Core Colors
    ====================================== */
        /* The 4 core colors moved from 4 loose families (indigo/teal/lime/
       orange) to a single scale, between two anchors — blue (Bar) on one
       end and pink (Bat) on the other — to cover both without looking
       arbitrary. The first attempt used indigo as `--primary` — read too
       purple (indigo is already blue-violet by nature). Swapped for a
       true blue; secondary/tertiary are the midpoints (violet/fuchsia)
       up to `--accent` (pink). */
        --primary-rgb: 37 99 235;
        /* blue */
        --secondary-rgb: 124 58 237;
        /* violet */
        --tertiary-rgb: 217 70 239;
        /* fuchsia */
        --accent-rgb: 236 72 153;
        /* pink */
        /* ======================================
   Semantic Colors
====================================== */
        --success-rgb: 22 163 74;
        /* emerald */
        --info-rgb: 59 130 246;
        /* blue */
        --warning-rgb: 245 158 11;
        /* amber */
        --danger-rgb: 239 68 68;
        /* red */
        /* ======================================
   Neutral Colors
====================================== */
        --dark-rgb: 39 39 42;
        /* zinc */
        --mid-rgb: 113 113 122;
        /* zinc mid */
        --light-rgb: 244 244 245;
        /* zinc light */
        --black-rgb: 24 24 27;
        /* soft black */
        --white-rgb: 250 250 250;
        /* soft white */
        /* ======================================
   Color Outputs
====================================== */
        --primary: rgb(var(--primary-rgb) / 1);
        --secondary: rgb(var(--secondary-rgb) / 1);
        --tertiary: rgb(var(--tertiary-rgb) / 1);
        --accent: rgb(var(--accent-rgb) / 1);
        --success: rgb(var(--success-rgb) / 1);
        --info: rgb(var(--info-rgb) / 1);
        --warning: rgb(var(--warning-rgb) / 1);
        --danger: rgb(var(--danger-rgb) / 1);
        --dark: rgb(var(--dark-rgb) / 1);
        --mid: rgb(var(--mid-rgb) / 1);
        --light: rgb(var(--light-rgb) / 1);
        --black: rgb(var(--black-rgb) / 1);
        --white: rgb(var(--white-rgb) / 1);
        /* ======================================
   Primary Alpha Scale
====================================== */
        --primary-100: rgb(var(--primary-rgb) / 1);
        --primary-90: rgb(var(--primary-rgb) / 0.9);
        --primary-80: rgb(var(--primary-rgb) / 0.8);
        --primary-70: rgb(var(--primary-rgb) / 0.7);
        --primary-60: rgb(var(--primary-rgb) / 0.6);
        --primary-50: rgb(var(--primary-rgb) / 0.5);
        --primary-40: rgb(var(--primary-rgb) / 0.4);
        --primary-30: rgb(var(--primary-rgb) / 0.3);
        --primary-20: rgb(var(--primary-rgb) / 0.2);
        --primary-10: rgb(var(--primary-rgb) / 0.1);
        --primary-0: rgb(var(--primary-rgb) / 0);
        /* ======================================
   Secondary Alpha Scale
====================================== */
        --secondary-100: rgb(var(--secondary-rgb) / 1);
        --secondary-90: rgb(var(--secondary-rgb) / 0.9);
        --secondary-80: rgb(var(--secondary-rgb) / 0.8);
        --secondary-70: rgb(var(--secondary-rgb) / 0.7);
        --secondary-60: rgb(var(--secondary-rgb) / 0.6);
        --secondary-50: rgb(var(--secondary-rgb) / 0.5);
        --secondary-40: rgb(var(--secondary-rgb) / 0.4);
        --secondary-30: rgb(var(--secondary-rgb) / 0.3);
        --secondary-20: rgb(var(--secondary-rgb) / 0.2);
        --secondary-10: rgb(var(--secondary-rgb) / 0.1);
        --secondary-0: rgb(var(--secondary-rgb) / 0);
        /* ======================================
   Tertiary Alpha Scale
====================================== */
        --tertiary-100: rgb(var(--tertiary-rgb) / 1);
        --tertiary-90: rgb(var(--tertiary-rgb) / 0.9);
        --tertiary-80: rgb(var(--tertiary-rgb) / 0.8);
        --tertiary-70: rgb(var(--tertiary-rgb) / 0.7);
        --tertiary-60: rgb(var(--tertiary-rgb) / 0.6);
        --tertiary-50: rgb(var(--tertiary-rgb) / 0.5);
        --tertiary-40: rgb(var(--tertiary-rgb) / 0.4);
        --tertiary-30: rgb(var(--tertiary-rgb) / 0.3);
        --tertiary-20: rgb(var(--tertiary-rgb) / 0.2);
        --tertiary-10: rgb(var(--tertiary-rgb) / 0.1);
        --tertiary-0: rgb(var(--tertiary-rgb) / 0);
        /* ======================================
   Accent Alpha Scale
====================================== */
        --accent-100: rgb(var(--accent-rgb) / 1);
        --accent-90: rgb(var(--accent-rgb) / 0.9);
        --accent-80: rgb(var(--accent-rgb) / 0.8);
        --accent-70: rgb(var(--accent-rgb) / 0.7);
        --accent-60: rgb(var(--accent-rgb) / 0.6);
        --accent-50: rgb(var(--accent-rgb) / 0.5);
        --accent-40: rgb(var(--accent-rgb) / 0.4);
        --accent-30: rgb(var(--accent-rgb) / 0.3);
        --accent-20: rgb(var(--accent-rgb) / 0.2);
        --accent-10: rgb(var(--accent-rgb) / 0.1);
        --accent-0: rgb(var(--accent-rgb) / 0);
        /* ======================================
   State Tokens
====================================== */
        --success-100: rgb(var(--success-rgb) / 1);
        --success-50: rgb(var(--success-rgb) / 0.5);
        --success-10: rgb(var(--success-rgb) / 0.1);
        --info-100: rgb(var(--info-rgb) / 1);
        --info-50: rgb(var(--info-rgb) / 0.5);
        --info-10: rgb(var(--info-rgb) / 0.1);
        --warning-100: rgb(var(--warning-rgb) / 1);
        --warning-50: rgb(var(--warning-rgb) / 0.5);
        --warning-10: rgb(var(--warning-rgb) / 0.1);
        --danger-100: rgb(var(--danger-rgb) / 1);
        --danger-50: rgb(var(--danger-rgb) / 0.5);
        --danger-10: rgb(var(--danger-rgb) / 0.1);
        /* ======================================
   Neutral Tokens
====================================== */
        --dark-100: rgb(var(--dark-rgb) / 1);
        --dark-50: rgb(var(--dark-rgb) / 0.5);
        --dark-10: rgb(var(--dark-rgb) / 0.1);
        --mid-100: rgb(var(--mid-rgb) / 1);
        --mid-50: rgb(var(--mid-rgb) / 0.5);
        --mid-10: rgb(var(--mid-rgb) / 0.1);
        --light-100: rgb(var(--light-rgb) / 1);
        --light-50: rgb(var(--light-rgb) / 0.5);
        --light-10: rgb(var(--light-rgb) / 0.1);
        --black-100: rgb(var(--black-rgb) / 1);
        --black-50: rgb(var(--black-rgb) / 0.5);
        --black-10: rgb(var(--black-rgb) / 0.1);
        --white-100: rgb(var(--white-rgb) / 1);
        --white-50: rgb(var(--white-rgb) / 0.5);
        --white-10: rgb(var(--white-rgb) / 0.1);
        /* ======================================
   Gradients
====================================== */
        /* Readjusted to follow the new blue→pink palette (see Core Colors
       above). `--primary-gradient` is the most used token in the whole
       app (icons, avatars, buttons) — becomes the full blue→pink span,
       matching the logo, instead of just blue→violet. `--accent-gradient`
       is the same span reversed (pink→blue). Secondary/tertiary stay as
       partial stretches of the scale, now moving forward only (never
       looping back to primary — the scale is a single direction now, not
       a circle). */
        /* Primary */
        /* Back to primary→secondary (not the full span up to accent) —
           this token is the most used in the app (nav, small icons,
           badges), repeated in a lot of places; the full blue→pink jump
           there felt too strong for how much UI uses it. The full span
           (logo) now lives only in `--accent-gradient`, used much less. */
        --primary-gradient: linear-gradient(135deg,
                var(--primary-100),
                var(--secondary-100));
        --primary-gradient-soft: linear-gradient(135deg,
                var(--primary-20),
                var(--secondary-20));
        /* Secondary */
        --secondary-gradient: linear-gradient(135deg,
                var(--secondary-100),
                var(--tertiary-100));
        --secondary-gradient-soft: linear-gradient(135deg,
                var(--secondary-20),
                var(--tertiary-20));
        /* Tertiary */
        --tertiary-gradient: linear-gradient(135deg,
                var(--tertiary-100),
                var(--accent-100));
        --tertiary-gradient-soft: linear-gradient(135deg,
                var(--tertiary-20),
                var(--accent-20));
        /* Accent */
        --accent-gradient: linear-gradient(135deg,
                var(--accent-100),
                var(--primary-100));
        --accent-gradient-soft: linear-gradient(135deg,
                var(--accent-20),
                var(--primary-20));
        /* ======================================
   Surface Colors
====================================== */
        --surface-warning-rgb: 255 251 248;
        --surface-warning: rgb(var(--surface-warning-rgb) / 1);
        /* ======================================
   Surface Tokens
====================================== */
        --surface-warning-100: rgb(var(--surface-warning-rgb) / 1);
        --surface-warning-50: rgb(var(--surface-warning-rgb) / 0.5);
        --surface-warning-10: rgb(var(--surface-warning-rgb) / 0.1);
        /* ======================================
   Typography
====================================== */
        --font-brand: "Sailec", "Avenir Next", "Inter", system-ui, sans-serif;
        --font-sans: "Inter", "Geist", system-ui, sans-serif;
        --font-serif: "Merriweather", Georgia, serif;
        --font-mono: "JetBrains Mono", "Geist Mono", "SF Mono", monospace;
        /* ======================================
   Typography Scale
====================================== */
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-md: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;
        --text-5xl: 3rem;
        --text-6xl: 3.75rem;
        --text-7xl: 4.5rem;
        /* ======================================
   Display
====================================== */
        --display: 6rem;
        --hero: 5rem;
        /* ======================================
   Headings
====================================== */
        --h1: var(--text-6xl);
        --h2: var(--text-5xl);
        --h3: var(--text-4xl);
        --h4: var(--text-3xl);
        --h5: var(--text-2xl);
        --h6: var(--text-xl);
        /* ======================================
   Body
====================================== */
        --body-lg: var(--text-lg);
        --body: var(--text-md);
        --body-sm: var(--text-sm);
        /* ======================================
   Interface Text
====================================== */
        --label: var(--text-sm);
        --caption: var(--text-xs);
        /* ======================================
   Line Height
====================================== */
        --leading-none: 1;
        --leading-tight: 1.2;
        --leading-normal: 1.5;
        --leading-relaxed: 1.75;
        --heading-line-height: var(--leading-tight);
        --body-line-height: var(--leading-normal);
        --heading-tracking: -0.02em;
        /* ======================================
   Font Weight
====================================== */
        --font-light: 300;
        --font-regular: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        /* ======================================
   Spacing Scale
====================================== */
        --space-0: 0;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;
        --space-32: 8rem;
        --space-40: 10rem;
        /* ======================================
   Semantic Spacing
====================================== */
        --gap-xs: var(--space-2);
        --gap-sm: var(--space-3);
        --gap-md: var(--space-4);
        --gap-lg: var(--space-6);
        --gap-xl: var(--space-8);
        --section-sm: var(--space-12);
        --section-md: var(--space-20);
        --section-lg: var(--space-32);
        /* ======================================
   Containers
====================================== */
        --container-xs: 30rem;
        --container-sm: 40rem;
        --container-md: 48rem;
        --container-lg: 64rem;
        --container-xl: 80rem;
        --container-2xl: 90rem;
        --container-content: var(--container-md);
        --container-page: var(--container-xl);
        --container-wide: var(--container-2xl);
        /* ======================================
   Breakpoints
====================================== */
        --screen-sm: 640px;
        --screen-md: 768px;
        --screen-lg: 1024px;
        /* ======================================
   Layout
====================================== */
        --page-padding: var(--space-6);
        --section-padding: var(--section-md);
        /* ======================================
   Border Radius
====================================== */
        --radius-none: 0;
        --radius-xs: 0.125rem;
        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --radius-2xl: 1.5rem;
        --radius-full: 9999px;
        --radius-button: var(--radius-md);
        --radius-input: var(--radius-md);
        --radius-card: var(--radius-xl);
        --radius-modal: var(--radius-2xl);
        --radius-avatar: var(--radius-full);
        /* ======================================
   Motion
====================================== */
        --duration-instant: 75ms;
        --duration-fast: 150ms;
        --duration-normal: 250ms;
        --duration-slow: 400ms;
        --duration-slower: 600ms;
        --ease-linear: linear;
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --motion-hover: var(--duration-fast) var(--ease-out);
        --motion-enter: var(--duration-normal) var(--ease-out);
        --motion-exit: var(--duration-fast) var(--ease-in);
        --motion-bounce: var(--duration-slow) var(--ease-spring);
        /* ======================================
   Border
====================================== */
        --border-width: 1px;
        --border-width-lg: 2px;
        --border-color: var(--dark-10);
        /* ======================================
   Shadow
====================================== */
        --shadow-rgb: var(--black-rgb);
        --shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / 0.04);
        --shadow-sm: 0 4px 12px rgb(var(--shadow-rgb) / 0.06);
        --shadow-md: 0 12px 32px rgb(var(--shadow-rgb) / 0.1);
        --shadow-lg: 0 24px 64px rgb(var(--shadow-rgb) / 0.14);
        /* ======================================
   Z Index
====================================== */
        --z-base: 1;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-overlay: 300;
        --z-modal: 400;
        --z-toast: 500;
        --z-absolute: 1000;
        /* ======================================
   Theme Tokens
====================================== */
        --background: rgb(var(--background-rgb) / 1);
        --surface: rgb(var(--surface-rgb) / 1);
        --surface-hover: rgb(var(--surface-hover-rgb) / 1);
        --surface-glass: rgb(var(--surface-rgb) / 0.8);
        --foreground: rgb(var(--foreground-rgb) / 1);
        --text: rgb(var(--text-rgb) / 1);
        --text-muted: rgb(var(--text-muted-rgb) / 1);
        /* ======================================
   Action Tokens
====================================== */
        --action-primary: rgb(var(--action-primary-rgb) / 1);
        --action-secondary: rgb(var(--action-secondary-rgb) / 1);
        --action-accent: rgb(var(--action-accent-rgb) / 1);
        /* ======================================
   Effects
====================================== */
        --focus-ring: 0 0 0 4px rgb(var(--primary-rgb) / 0.2);
    }

    /* ======================================
   Light Theme
====================================== */
    :root,
    [data-theme="light"] {
        color-scheme: light;
        --background-rgb: 239 240 245;
        --surface-rgb: 252 252 253;
        --surface-hover-rgb: 244 245 248;
        --foreground-rgb: 36 36 40;
        --text-rgb: 36 36 40;
        --text-muted-rgb: 118 118 128;
        --border-color: rgb(var(--black-rgb) / 0.08);
        --action-primary-rgb: var(--primary-rgb);
        --action-secondary-rgb: var(--secondary-rgb);
        --action-accent-rgb: var(--accent-rgb);
        --shadow-rgb: var(--black-rgb);
    }

    /* ======================================
   Dark Theme
====================================== */
    [data-theme="dark"] {
        color-scheme: dark;
        --background-rgb: 18 18 22;
        --surface-rgb: 30 30 36;
        --surface-hover-rgb: 42 42 50;
        --foreground-rgb: 245 245 247;
        --text-rgb: 235 235 240;
        --text-muted-rgb: 150 150 160;
        --border-color: rgb(var(--white-rgb) / 0.1);
        --action-primary-rgb: var(--primary-rgb);
        --action-secondary-rgb: var(--secondary-rgb);
        --action-accent-rgb: var(--accent-rgb);
        --shadow-rgb: 0 0 0;
    }
}