:root,
[data-theme="light"] {
    color-scheme: light;

    --color-bg-primary: #fafbfc;
    --color-bg-secondary: #eff2f5;
    --color-bg-elevated: #ffffff;
    --color-text-primary: #0d1117;
    --color-text-secondary: #424a53;
    --color-text-muted: #3f4852;

    --color-accent-blue: #0969da;
    --color-accent-blue-light: #54aeff;
    --color-accent-blue-dark: #033d8b;

    --color-success: #1a7f37;
    --color-success-bg: #dafbe1;
    --color-warning: #8a4300;
    --color-warning-bg: #fff8c5;
    --color-danger: #b42318;
    --color-danger-bg: #ffebe6;
    --color-info: #0969da;
    --color-info-bg: #ddf4ff;

    --color-border: #d0d7de;
    --color-shadow: rgb(0 0 0 / 8%);

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", "Courier New", monospace;

    --font-size-xs: 12px;
    --line-height-xs: 16px;
    --font-size-sm: 14px;
    --line-height-sm: 20px;
    --font-size-base: 16px;
    --line-height-base: 24px;
    --font-size-lg: 18px;
    --line-height-lg: 28px;
    --font-size-xl: 20px;
    --line-height-xl: 28px;
    --font-size-2xl: 24px;
    --line-height-2xl: 32px;
    --font-size-3xl: 32px;
    --line-height-3xl: 40px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --grid-columns: 12;
    --grid-gutter: 16px;
    --content-gutter: 32px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg-primary: #0d1117;
    --color-bg-secondary: #161b22;
    --color-bg-elevated: #21262d;
    --color-text-primary: #e6edf3;
    --color-text-secondary: #aeb6c0;
    --color-text-muted: #a0a8b2;

    --color-accent-blue: #58a6ff;
    --color-accent-blue-light: #79c0ff;
    --color-accent-blue-dark: #1f6feb;

    --color-success: #56d364;
    --color-success-bg: #0d432d;
    --color-warning: #e3b341;
    --color-warning-bg: #3d2d0d;
    --color-danger: #ff7b72;
    --color-danger-bg: #3d0e0e;
    --color-info: #79c0ff;
    --color-info-bg: #0d2d52;

    --color-border: #30363d;
    --color-shadow: rgb(0 0 0 / 30%);
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
    width: 100%;
}

@media (max-width: 640px) {
    :root,
    [data-theme] {
        --grid-columns: 4;
        --grid-gutter: 8px;
        --content-gutter: 16px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    :root,
    [data-theme] {
        --grid-columns: 8;
        --grid-gutter: 12px;
        --content-gutter: 24px;
    }
}

@media (min-width: 1025px) {
    :root,
    [data-theme] {
        --grid-columns: 12;
        --grid-gutter: 16px;
        --content-gutter: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}