/* ==============================================
   main.css - Reset, CSS Variables (shadcn-inspired), Typography
   테마 A: 리브인 (LIVE-IN) - 감성 리빙
   테마 B: 포포 (POPO) - 반려동물
   ============================================== */

/* --- Accessibility: Skip-to-content link --- */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary, #e84393);
    color: #fff;
    padding: 8px 24px;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--color-primary, #e84393);
    outline-offset: 2px;
}

/* --- Reset (shadcn/ui style) --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "rlig" 1, "calt" 1;
}

/* --- CSS Variables: 리브인 (Default / shadcn-inspired) --- */
:root {
    /* === TIER 1: PRIMITIVES — Raw color palettes (HSL components, no wrapper) === */

    /* Brown (LIVE-IN primary) */
    --brown-50: 40 20% 97%;
    --brown-100: 38 18% 92%;
    --brown-200: 36 16% 82%;
    --brown-300: 34 18% 68%;
    --brown-400: 32 20% 55%;
    --brown-500: 30 22% 42%;
    --brown-600: 28 24% 35%;
    --brown-700: 26 26% 28%;
    --brown-800: 24 22% 20%;
    --brown-900: 22 20% 12%;

    /* Orange (POPO primary) */
    --orange-50: 25 90% 97%;
    --orange-100: 25 85% 92%;
    --orange-200: 24 80% 82%;
    --orange-300: 23 78% 70%;
    --orange-400: 22 78% 60%;
    --orange-500: 20 80% 52%;
    --orange-600: 18 82% 44%;
    --orange-700: 16 80% 36%;
    --orange-800: 14 75% 28%;
    --orange-900: 12 70% 18%;

    /* Red (destructive/sale) */
    --red-50: 0 86% 97%;
    --red-100: 0 84% 94%;
    --red-200: 0 82% 86%;
    --red-300: 0 80% 74%;
    --red-400: 0 84% 60%;
    --red-500: 0 72% 51%;
    --red-600: 0 70% 42%;
    --red-700: 0 68% 34%;
    --red-800: 0 64% 26%;
    --red-900: 0 60% 18%;

    /* Green (success) */
    --green-50: 142 76% 97%;
    --green-100: 142 76% 94%;
    --green-200: 142 76% 86%;
    --green-300: 142 76% 72%;
    --green-400: 142 76% 55%;
    --green-500: 142 76% 36%;
    --green-600: 142 72% 30%;
    --green-700: 142 68% 24%;
    --green-800: 142 64% 18%;
    --green-900: 142 60% 12%;

    /* Blue (info) */
    --blue-50: 217 91% 97%;
    --blue-100: 217 91% 94%;
    --blue-200: 217 91% 86%;
    --blue-300: 217 91% 72%;
    --blue-400: 217 91% 60%;
    --blue-500: 217 91% 50%;
    --blue-600: 217 88% 42%;
    --blue-700: 217 84% 34%;
    --blue-800: 217 80% 26%;
    --blue-900: 217 76% 18%;

    /* Purple (super admin) */
    --purple-50: 262 83% 97%;
    --purple-100: 262 83% 94%;
    --purple-200: 262 83% 86%;
    --purple-300: 262 83% 72%;
    --purple-400: 262 83% 58%;
    --purple-500: 262 80% 50%;
    --purple-600: 262 76% 42%;
    --purple-700: 262 72% 34%;
    --purple-800: 262 68% 26%;
    --purple-900: 262 64% 18%;

    /* Yellow (warning/star) */
    --yellow-50: 45 93% 97%;
    --yellow-100: 45 93% 94%;
    --yellow-200: 45 93% 86%;
    --yellow-300: 45 93% 72%;
    --yellow-400: 45 93% 47%;
    --yellow-500: 45 90% 40%;
    --yellow-600: 45 85% 33%;
    --yellow-700: 45 80% 26%;
    --yellow-800: 45 75% 20%;
    --yellow-900: 45 70% 14%;

    /* Neutral (gray scale) */
    --neutral-50: 0 0% 98%;
    --neutral-100: 0 0% 93%;
    --neutral-200: 0 0% 86%;
    --neutral-300: 0 0% 76%;
    --neutral-400: 0 0% 62%;
    --neutral-500: 0 0% 45%;
    --neutral-600: 0 0% 40%;
    --neutral-700: 0 0% 30%;
    --neutral-800: 0 0% 20%;
    --neutral-900: 0 0% 10%;

    /* shadcn color system (HSL) adapted for 리브인 warm palette */
    --background: 40 20% 98%;
    --foreground: 30 10% 10%;
    --card: 0 0% 100%;
    --card-foreground: 30 10% 10%;
    --primary: 30 22% 42%;        /* warm brown #8B7355 */
    --primary-foreground: 40 20% 98%;
    --secondary: 35 15% 93%;
    --secondary-foreground: 30 10% 20%;
    --muted: 35 10% 93%;
    --muted-foreground: 30 5% 46%;
    --accent: 35 15% 93%;
    --accent-foreground: 30 10% 20%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 35 10% 88%;
    --input: 35 10% 88%;
    --ring: 30 22% 42%;
    --radius: 0.75rem;

    /* Custom theme tokens */
    --color-primary: hsl(var(--primary));
    --color-bg: hsl(var(--background));
    --color-card-bg: hsl(var(--card));
    --color-text: hsl(var(--foreground));
    --color-text-muted: hsl(var(--muted-foreground));
    --color-border: hsl(var(--border));
    --color-secondary-bg: hsl(var(--secondary));

    --color-sale: hsl(var(--red-400));
    --color-badge-sale: var(--color-sale);

    /* === TIER 2: SEMANTIC STATE — Meaning-based color aliases === */
    --color-success: hsl(var(--green-500));
    --color-warning: hsl(var(--yellow-400));
    --color-error: hsl(var(--red-400));
    --color-info: hsl(var(--blue-400));
    --color-star-filled: hsl(var(--yellow-400));
    --color-star-empty: hsl(var(--neutral-300));
    --color-primary-hover: hsl(30 24% 35%);
    --color-primary-disabled: hsl(30 10% 42% / 0.5);
    --color-danger-hover: hsl(0 72% 46%);
    --color-success-hover: hsl(142 76% 30%);

    --color-on-primary: #fff;
    --color-on-dark: #fff;
    --color-super: hsl(var(--purple-400));
    --color-super-bg: hsl(var(--purple-400) / 0.1);
    --color-super-hover: hsl(var(--purple-300));
    --color-super-border: hsl(var(--purple-400) / 0.2);

    /* === TIER 3: COMPONENT — Badge state tokens === */
    --badge-active-bg: hsl(var(--green-100));
    --badge-active-text: hsl(var(--green-600));
    --badge-pending-bg: hsl(var(--yellow-100));
    --badge-pending-text: hsl(var(--yellow-600));
    --badge-error-bg: hsl(var(--red-100));
    --badge-error-text: hsl(var(--red-600));
    --badge-info-bg: hsl(var(--blue-100));
    --badge-info-text: hsl(var(--blue-600));

    /* === BRAND — Social login & grade tokens (fixed values, DO NOT change) === */
    --brand-kakao: #FEE500;
    --brand-kakao-text: #191919;
    --brand-naver: #03C75A;
    --brand-google: #4285F4;
    --grade-default: #6c757d;
    --grade-bronze: #CD7F32;
    --grade-silver: #C0C0C0;
    --grade-gold: #FFD700;
    --grade-vip-start: #667eea;
    --grade-vip-end: #764ba2;

    /* === Z-INDEX MAP — Named stacking layers === */
    --z-base: 1;
    --z-content: 2;
    --z-sticky: 10;
    --z-header-search: 49;
    --z-header: 50;
    --z-dropdown: 100;
    --z-dropdown-elevated: 110;
    --z-sidebar-overlay: 199;
    --z-sidebar: 200;
    --z-notification-overlay: 299;
    --z-notification: 300;
    --z-modal: 400;
    --z-command: 500;
    --z-back-to-top: 997;
    --z-bottom-tab: 998;
    --z-drawer-overlay: 999;
    --z-drawer: 1000;
    --z-hamburger: 1001;
    --z-preview: 9999;
    --z-toast: 10000;

    /* === TYPOGRAPHY SCALE (10-step, Korean ecommerce optimized) === */
    --text-2xs:  0.6875rem;  /* 11px */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-md:   0.875rem;   /* 14px */
    --text-base: 0.9375rem;  /* 15px */
    --text-lg:   1rem;       /* 16px */
    --text-xl:   1.125rem;   /* 18px */
    --text-2xl:  1.25rem;    /* 20px */
    --text-3xl:  1.5rem;     /* 24px */
    --text-4xl:  1.875rem;   /* 30px */

    /* === FONT WEIGHT SCALE === */
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* === LINE HEIGHT SCALE === */
    --leading-none:    1;
    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-normal:  1.6;
    --leading-relaxed: 1.7;
    --leading-loose:   2.0;

    /* === LETTER SPACING === */
    --tracking-tighter: -0.025em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.01em;
    --tracking-wider:   0.02em;
    --tracking-widest:  0.05em;

    /* === 8px SPACING SCALE === */
    --space-0:   0;
    --space-px:  1px;
    --space-05:  0.125rem;   /* 2px */
    --space-1:   0.25rem;    /* 4px */
    --space-15:  0.375rem;   /* 6px */
    --space-2:   0.5rem;     /* 8px */
    --space-25:  0.625rem;   /* 10px */
    --space-3:   0.75rem;    /* 12px */
    --space-35:  0.875rem;   /* 14px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-7:   1.75rem;    /* 28px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-16:  4rem;       /* 64px */

    --radius-card: var(--radius);
    --radius-btn: calc(var(--radius) - 2px);
    --radius-badge: calc(var(--radius) - 4px);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --container-max: 1400px;
    --header-height: 60px;

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 포포 (POPO) 테마: body.theme-pet --- */
.theme-pet {
    --background: 25 60% 97%;
    --foreground: 20 10% 10%;
    --primary: 22 78% 60%;        /* warm orange #E8834A */
    --primary-foreground: 0 0% 100%;
    --secondary: 25 40% 93%;
    --secondary-foreground: 20 10% 20%;
    --muted: 25 20% 93%;
    --muted-foreground: 20 5% 46%;
    --border: 25 20% 88%;
    --ring: 22 78% 60%;
    --radius: 1.25rem;            /* 더 둥글게 */

    --color-primary: hsl(var(--primary));
    --color-bg: hsl(var(--background));
    --color-card-bg: hsl(var(--card));
    --color-border: hsl(var(--border));
    --color-secondary-bg: hsl(var(--secondary));
    --radius-card: var(--radius);
    --radius-btn: calc(var(--radius) - 4px);
}

/* --- Feature #77: Dark Mode --- */
[data-theme="dark"] {
    --background: 222 14% 10%;
    --foreground: 210 20% 90%;
    --card: 222 14% 14%;
    --card-foreground: 210 20% 90%;
    --primary: 30 22% 55%;
    --primary-foreground: 222 14% 10%;
    --secondary: 222 10% 18%;
    --secondary-foreground: 210 20% 80%;
    --muted: 222 10% 20%;
    --muted-foreground: 210 10% 55%;
    --accent: 222 10% 18%;
    --accent-foreground: 210 20% 80%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 222 10% 22%;
    --input: 222 10% 22%;
    --ring: 30 22% 55%;

    --color-primary: hsl(var(--primary));
    --color-bg: hsl(var(--background));
    --color-card-bg: hsl(var(--card));
    --color-text: hsl(var(--foreground));
    --color-text-muted: hsl(var(--muted-foreground));
    --color-border: hsl(var(--border));
    --color-secondary-bg: hsl(var(--secondary));

    --color-sale: hsl(0, 72%, 55%);
    --color-badge-sale: hsl(0, 72%, 55%);

    /* Semantic state tokens (dark mode) */
    --color-success: hsl(var(--green-400));
    --color-warning: hsl(var(--yellow-300));
    --color-error: hsl(var(--red-400));
    --color-info: hsl(var(--blue-300));
    --color-star-filled: hsl(var(--yellow-300));
    --color-star-empty: hsl(var(--neutral-600));
    --color-on-primary: hsl(222 14% 10%);
    --color-on-dark: hsl(210 20% 90%);
    --color-super: hsl(var(--purple-300));
    --color-super-bg: hsl(var(--purple-300) / 0.12);
    --color-super-hover: hsl(var(--purple-200));
    --color-super-border: hsl(var(--purple-300) / 0.25);

    /* Component badge tokens (dark mode) */
    --badge-active-bg: hsl(var(--green-900));
    --badge-active-text: hsl(var(--green-300));
    --badge-pending-bg: hsl(var(--yellow-900));
    --badge-pending-text: hsl(var(--yellow-300));
    --badge-error-bg: hsl(var(--red-900));
    --badge-error-text: hsl(var(--red-300));
    --badge-info-bg: hsl(var(--blue-900));
    --badge-info-text: hsl(var(--blue-300));

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

    color-scheme: dark;
}

/* Dark mode for POPO theme */
.theme-pet[data-theme="dark"],
[data-theme="dark"] .theme-pet {
    --background: 20 14% 10%;
    --foreground: 25 20% 90%;
    --card: 20 14% 14%;
    --primary: 22 78% 55%;
    --primary-foreground: 20 14% 10%;
    --secondary: 20 10% 18%;
    --secondary-foreground: 25 20% 80%;
    --muted: 20 10% 20%;
    --muted-foreground: 20 5% 55%;
    --border: 20 10% 22%;
    --ring: 22 78% 55%;

    --color-primary: hsl(var(--primary));
    --color-bg: hsl(var(--background));
    --color-card-bg: hsl(var(--card));
    --color-border: hsl(var(--border));
    --color-secondary-bg: hsl(var(--secondary));

    /* Semantic state tokens (dark mode — same as [data-theme="dark"]) */
    --color-success: hsl(var(--green-400));
    --color-warning: hsl(var(--yellow-300));
    --color-error: hsl(var(--red-400));
    --color-info: hsl(var(--blue-300));
    --color-star-filled: hsl(var(--yellow-300));
    --color-star-empty: hsl(var(--neutral-600));
    --color-on-primary: hsl(222 14% 10%);
    --color-on-dark: hsl(210 20% 90%);
    --color-super: hsl(var(--purple-300));
    --color-super-bg: hsl(var(--purple-300) / 0.12);
    --color-super-hover: hsl(var(--purple-200));
    --color-super-border: hsl(var(--purple-300) / 0.25);

    /* Component badge tokens (dark mode) */
    --badge-active-bg: hsl(var(--green-900));
    --badge-active-text: hsl(var(--green-300));
    --badge-pending-bg: hsl(var(--yellow-900));
    --badge-pending-text: hsl(var(--yellow-300));
    --badge-error-bg: hsl(var(--red-900));
    --badge-error-text: hsl(var(--red-300));
    --badge-info-bg: hsl(var(--blue-900));
    --badge-info-text: hsl(var(--blue-300));
}

/* === ADMIN ISOLATION === */
/* Lock admin tokens to prevent storefront :root changes from affecting admin panels */
/* Admin layouts use data-admin-type="shop" or data-admin-type="super" on <html> */
[data-admin-type] {
    /* shadcn base tokens (locked to LIVE-IN light defaults) */
    --background: 40 20% 98%;
    --foreground: 30 10% 10%;
    --card: 0 0% 100%;
    --card-foreground: 30 10% 10%;
    --primary: 30 22% 42%;
    --primary-foreground: 40 20% 98%;
    --secondary: 35 15% 93%;
    --secondary-foreground: 30 10% 20%;
    --muted: 35 10% 93%;
    --muted-foreground: 30 5% 46%;
    --accent: 35 15% 93%;
    --accent-foreground: 30 10% 20%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 35 10% 88%;
    --input: 35 10% 88%;
    --ring: 30 22% 42%;
    --radius: 0.75rem;

    /* semantic tokens (locked) */
    --color-primary: hsl(var(--primary));
    --color-bg: hsl(var(--background));
    --color-card-bg: hsl(var(--card));
    --color-text: hsl(var(--foreground));
    --color-text-muted: hsl(var(--muted-foreground));
    --color-border: hsl(var(--border));
    --color-secondary-bg: hsl(var(--secondary));
    --color-sale: hsl(var(--red-400));
    --color-badge-sale: var(--color-sale);

    /* state tokens */
    --color-success: hsl(var(--green-500));
    --color-warning: hsl(var(--yellow-400));
    --color-error: hsl(var(--red-400));
    --color-info: hsl(var(--blue-400));
    --color-super: hsl(var(--purple-400));
    --color-super-bg: hsl(var(--purple-400) / 0.1);
    --color-super-hover: hsl(var(--purple-300));
    --color-super-border: hsl(var(--purple-400) / 0.2);

    /* shadow tokens */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

[data-admin-type][data-theme="dark"] {
    --background: 222 14% 10%;
    --foreground: 210 20% 90%;
    --card: 222 14% 14%;
    --card-foreground: 210 20% 90%;
    --primary: 30 22% 55%;
    --primary-foreground: 222 14% 10%;
    --secondary: 222 10% 18%;
    --secondary-foreground: 210 20% 80%;
    --muted: 222 10% 20%;
    --muted-foreground: 210 10% 55%;
    --accent: 222 10% 18%;
    --accent-foreground: 210 20% 80%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 222 10% 22%;
    --input: 222 10% 22%;
    --ring: 30 22% 55%;

    --color-primary: hsl(var(--primary));
    --color-bg: hsl(var(--background));
    --color-card-bg: hsl(var(--card));
    --color-text: hsl(var(--foreground));
    --color-text-muted: hsl(var(--muted-foreground));
    --color-border: hsl(var(--border));
    --color-secondary-bg: hsl(var(--secondary));
    --color-sale: hsl(0, 72%, 55%);
    --color-badge-sale: var(--color-sale);

    --color-success: hsl(var(--green-400));
    --color-warning: hsl(var(--yellow-300));
    --color-error: hsl(var(--red-400));
    --color-info: hsl(var(--blue-300));
    --color-super: hsl(var(--purple-300));
    --color-super-bg: hsl(var(--purple-300) / 0.12);
    --color-super-hover: hsl(var(--purple-200));
    --color-super-border: hsl(var(--purple-300) / 0.25);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

    color-scheme: dark;
}

/* Dark mode image brightness adjustment */
[data-theme="dark"] img {
    filter: brightness(0.9);
}

[data-theme="dark"] img:hover {
    filter: brightness(1);
}

/* Dark mode toggle button */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.dark-mode-toggle:hover {
    color: var(--color-primary);
}

/* Respect system preference when no JS or no saved preference */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --background: 222 14% 10%;
        --foreground: 210 20% 90%;
        --card: 222 14% 14%;
        --card-foreground: 210 20% 90%;
        --primary: 30 22% 55%;
        --primary-foreground: 222 14% 10%;
        --secondary: 222 10% 18%;
        --secondary-foreground: 210 20% 80%;
        --muted: 222 10% 20%;
        --muted-foreground: 210 10% 55%;
        --border: 222 10% 22%;
        --input: 222 10% 22%;
        --ring: 30 22% 55%;

        --color-primary: hsl(var(--primary));
        --color-bg: hsl(var(--background));
        --color-card-bg: hsl(var(--card));
        --color-text: hsl(var(--foreground));
        --color-text-muted: hsl(var(--muted-foreground));
        --color-border: hsl(var(--border));
        --color-secondary-bg: hsl(var(--secondary));

        /* Semantic state tokens (dark mode) */
        --color-success: hsl(var(--green-400));
        --color-warning: hsl(var(--yellow-300));
        --color-error: hsl(var(--red-400));
        --color-info: hsl(var(--blue-300));
        --color-star-filled: hsl(var(--yellow-300));
        --color-star-empty: hsl(var(--neutral-600));
        --color-on-primary: hsl(222 14% 10%);
        --color-on-dark: hsl(210 20% 90%);
        --color-super: hsl(var(--purple-300));
        --color-super-bg: hsl(var(--purple-300) / 0.12);
        --color-super-hover: hsl(var(--purple-200));
        --color-super-border: hsl(var(--purple-300) / 0.25);

        /* Component badge tokens (dark mode) */
        --badge-active-bg: hsl(var(--green-900));
        --badge-active-text: hsl(var(--green-300));
        --badge-pending-bg: hsl(var(--yellow-900));
        --badge-pending-text: hsl(var(--yellow-300));
        --badge-error-bg: hsl(var(--red-900));
        --badge-error-text: hsl(var(--red-300));
        --badge-info-bg: hsl(var(--blue-900));
        --badge-info-text: hsl(var(--blue-300));

        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

        color-scheme: dark;
    }
}

/* --- Base styles --- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

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

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    background: none;
}

select {
    font-family: inherit;
    font-size: inherit;
}

/* --- Typography --- */
h1 { font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-3xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-lg); font-weight: var(--font-medium); line-height: var(--leading-snug); }

/* --- Utility: Button (shadcn-inspired) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-btn);
    transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-outlink {
    width: 100%;
    background-color: var(--color-primary);
    color: hsl(var(--primary-foreground));
    padding: var(--space-25) var(--space-4);
    font-weight: var(--font-semibold);
}

.btn-outlink:hover {
    opacity: 0.9;
}

.btn-disabled {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-outline {
    border: 1px solid var(--color-border);
    background-color: var(--color-card-bg);
    color: var(--color-text);
    padding: var(--space-25) var(--space-6);
}

.btn-outline:hover {
    background-color: var(--color-secondary-bg);
}

.btn-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: var(--space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* --- Required field indicator --- */
.required {
    color: var(--color-error);
    font-weight: var(--font-medium);
}

/* === Lucide Icon Utilities === */
[data-lucide] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 64px; height: 64px; }

/* Utility: Inline Form */
.inline-form { display: inline; }

/* Utility: Load More Wrap */
.load-more-wrap { text-align: center; margin: var(--space-6) 0; }

/* Brand Wordmark */
.logo-wordmark {
    height: 24px;
    width: auto;
    display: block;
    color: var(--color-text);
}