/* BEGIN /assets/css/theme.css */

/* 01. FONT SYSTEM */
:root {
    --font-primary:
        "Geist",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* 02. LIGHT THEME */
:root {
    --color-bg: #F3F4F6;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F9FAFB;

    --color-heading: #111827;
    --color-body: #4B5563;
    --color-secondary: #6B7280;
    --color-muted: #9CA3AF;
    --color-placeholder: #9CA3AF;

    --color-border: #E5E7EB;
    --color-border-hover: #D1D5DB;

    --color-accent: #6B4FE0;
    --color-accent-hover: #6D4AFF;

    --color-success: #16A34A;
    --color-error: #DC2626;
    --color-warning: #D97706;
    --color-info: #2563EB;

    --color-focus: rgba(124, 92, 255, 0.35);

    --color-selection-bg: #7C5CFF;
    --color-selection-text: #FFFFFF;
}

/* 03. DARK THEME */
html[data-theme="dark"] {
    --color-bg: #000000;
    --color-surface: #08090A;
    --color-surface-soft: #0A0A0C;

    --color-heading: #D0D6E0;
    --color-body: #8A8A93;
    --color-secondary: #B8BCC4;
    --color-muted: #6B6B74;
    --color-placeholder: #4A4A52;

    --color-border: #2D2D33;
    --color-border-hover: #464650;

    --color-accent: #6B4FE0;
    --color-accent-hover: #9179FF;

    --color-success: #4ADE80;
    --color-error: #FF5C5C;
    --color-warning: #F59E0B;
    --color-info: #60A5FA;

    --color-focus: rgba(124, 92, 255, 0.55);

    --color-selection-bg: #7C5CFF;
    --color-selection-text: #FFFFFF;
}

/* 04. CONTAINER SYSTEM */
:root {
    --container-width: 1180px;
    --container-padding-x: 22px;
    --container-padding-x-mobile: 15px;
}

/* 05. SECTION VERTICAL PADDING SYSTEM */
:root {
    --section-padding-y: 50px;
    --section-padding-y-mobile: 34px;
}

/* 06. RESPONSIVE GLOBAL LAYOUT */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-padding-x: 22px;
        --section-padding-y: 50px;
    }
}

@media (max-width: 767px) {
    :root {
        --container-padding-x: 15px;
        --section-padding-y: 34px;
    }
}

/* 07. GLOBAL ROOT BEHAVIOR */
html {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 08. TEXT SELECTION */
::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}

/* 09. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* END /assets/css/theme.css */