/* Shared design system: one core theme, two semantic variants, three shell widths. */

body[data-theme] {
    --font-display: 'Fredoka', sans-serif;
    --font-body: 'Quicksand', sans-serif;
    --font-accent: 'Nunito', sans-serif;
    --font-main: var(--font-body);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    --focus-ring: var(--accent-dark);
    --chrome-surface: rgba(255, 255, 255, 0.9);
    --chrome-surface-strong: rgba(255, 255, 255, 0.96);
    --chrome-shadow: 0 10px 32px var(--shadow);
    --surface-muted: color-mix(in srgb, var(--card-bg) 75%, var(--bg-main) 25%);
    --active-surface: var(--primary-light);
    --active-border: var(--primary-dark);
    --link-hover-surface: color-mix(in srgb, var(--primary-light) 55%, transparent);
    color-scheme: light;
}

body[data-theme="core"] {
    --primary: #F8A5B8;
    --primary-light: #FFCAD4;
    --primary-dark: #E8899C;
    --secondary: #7BC8F6;
    --secondary-light: #A5DDFB;
    --secondary-dark: #5AADE0;
    --accent: #C9A0DC;
    --accent-light: #DFC5EC;
    --accent-dark: #A87DC2;
    --gold: #F5D76E;
    --success: #8ED16C;
    --success-dark: #6DB855;
    --warning: #F5916E;
    --bg-main: #FFF9F5;
    --bg-gradient: linear-gradient(135deg, #FFF9F5 0%, #F0F8FF 50%, #FFF5F8 100%);
    --bg-cream: #F6E0B5;
    --bg-warm: #FFF5F8;
    --card-bg: #FFFFFF;
    --border: #F0E6EB;
    --shadow: rgba(248, 165, 184, 0.15);
    --text-dark: #5D4E60;
    --text-medium: #6B5C70;
    --text-light: #807084;
}

body[data-theme="nature"] {
    --primary: #F5D76E;
    --primary-light: #FBE89F;
    --primary-dark: #D4B84A;
    --secondary: #F8A5B8;
    --secondary-light: #FFCAD4;
    --secondary-dark: #E8899C;
    --accent: #8ED16C;
    --accent-light: #B6E09A;
    --accent-dark: #6DB855;
    --gold: #F5D76E;
    --success: #8ED16C;
    --success-dark: #6DB855;
    --warning: #F5916E;
    --bg-main: #FFFCF5;
    --bg-gradient: linear-gradient(135deg, #FFFCF5 0%, #FFF9E6 50%, #FFFFF0 100%);
    --bg-cream: #F6E0B5;
    --bg-warm: #FFF9E6;
    --card-bg: #FFFFFF;
    --border: #F0E6D6;
    --shadow: rgba(245, 215, 110, 0.18);
    --text-dark: #5D4E37;
    --text-medium: #72615A;
    --text-light: #87725F;
}

body[data-theme="maker"] {
    --primary: #C9A0DC;
    --primary-light: #DFC5EC;
    --primary-dark: #A87DC2;
    --secondary: #F8A5B8;
    --secondary-light: #FFCAD4;
    --secondary-dark: #E8899C;
    --accent: #7BC8F6;
    --accent-light: #A5DDFB;
    --accent-dark: #5AADE0;
    --gold: #F5D76E;
    --success: #8ED16C;
    --success-dark: #6DB855;
    --warning: #F5916E;
    --bg-main: #FBF8FF;
    --bg-gradient: linear-gradient(135deg, #FBF8FF 0%, #F8F0FF 50%, #FFF8FB 100%);
    --bg-cream: #F6E0B5;
    --bg-warm: #F8F0FF;
    --card-bg: #FFFFFF;
    --border: #F0E6F5;
    --shadow: rgba(201, 160, 220, 0.15);
    --text-dark: #5D4E60;
    --text-medium: #6B5C70;
    --text-light: #807084;
}

body[data-theme] {
    --color-primary: var(--primary);
    --color-primary-light: var(--primary-light);
    --color-primary-dark: var(--primary-dark);
    --color-secondary: var(--secondary);
    --color-secondary-light: var(--secondary-light);
    --color-secondary-dark: var(--secondary-dark);
    --color-accent: var(--accent);
    --color-accent-light: var(--accent-light);
    --color-accent-dark: var(--accent-dark);
    --color-success: var(--success);
    --color-success-light: var(--accent-light);
    --color-success-dark: var(--success-dark);
    --color-gold: var(--gold);
    --color-gold-light: var(--primary-light);
    --color-gold-dark: var(--primary-dark);
    --color-warning: var(--warning);
    --color-border: var(--border);
    --color-bg-main: var(--bg-main);
    --color-bg-gradient: var(--bg-gradient);
    --color-bg-card: var(--card-bg);
    --color-bg-cream: var(--bg-cream);
    --color-bg-primary: var(--primary-light);
    --color-bg-secondary: var(--secondary-light);
    --color-text-primary: var(--text-dark);
    --color-text-secondary: var(--text-medium);
    --color-text-muted: var(--text-light);
    --color-text-white: #FFFFFF;
    --color-cream: var(--bg-cream);
    --color-coral: var(--primary);
    --color-coral-light: var(--primary-light);
    --color-coral-dark: var(--primary-dark);
    --color-indigo: var(--accent);
    --color-indigo-dark: var(--accent-dark);
    --container-max: var(--shell-main, 900px);
}

body[data-shell="article"] {
    --shell-main: 900px;
    --shell-header: 1400px;
}

body[data-shell="hub"] {
    --shell-main: 1100px;
    --shell-header: 1400px;
}

body[data-shell="explorer"] {
    --shell-main: 1400px;
    --shell-header: 1600px;
}

body[data-theme] {
    background: var(--bg-main);
    color: var(--text-dark);
}

body[data-theme] .header-content,
body[data-theme] .header-inner,
body[data-theme] .nav-container,
body[data-theme] header .container,
body[data-theme] .footer-content,
body[data-theme] .footer-bottom {
    max-width: var(--shell-header) !important;
    margin-left: auto;
    margin-right: auto;
}

body[data-theme] .main-content,
body[data-theme] .page-container,
body[data-theme] .content-wrapper,
body[data-theme] .content-shell,
body[data-theme] .layout-shell,
body[data-theme] .breadcrumb,
body[data-theme] main.container,
body[data-theme] main .container,
body[data-theme] section .container,
body[data-theme] .section .container,
body[data-theme] .hero .container,
body[data-theme] .hero-content.container,
body[data-theme] .download-content,
body[data-theme] .codes-section .container,
body[data-theme] .database-section .container,
body[data-theme] .guides-section .container,
body[data-theme] .tools-section .container,
body[data-theme] .quick-nav .container {
    max-width: var(--shell-main) !important;
    margin-left: auto;
    margin-right: auto;
}

body[data-shell="explorer"] .breadcrumb {
    max-width: 1400px !important;
}

body[data-theme] .header {
    background: var(--chrome-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(16px);
    box-shadow: none;
}

body[data-theme] .header.scrolled {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body[data-theme] .header-inner,
body[data-theme] .header-content,
body[data-theme] .nav-container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem !important;
}

body[data-theme] .logo,
body[data-theme] .logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--text-dark);
}

body[data-theme] .logo span,
body[data-theme] .logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme] .nav,
body[data-theme] .site-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body[data-theme] .nav-list,
body[data-theme] .mobile-nav-list,
body[data-theme] .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

body[data-theme] .nav-list,
body[data-theme] .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

body[data-theme] .nav-link,
body[data-theme] .nav a,
body[data-theme] .site-nav a,
body[data-theme] .footer a {
    text-decoration: none;
}

body[data-theme] .nav-list a,
body[data-theme] .nav-link,
body[data-theme] .site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text-medium) !important;
    font-weight: 700;
    line-height: 1.2;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

body[data-theme] .nav-list a:hover,
body[data-theme] .nav-link:hover,
body[data-theme] .site-nav a:hover {
    background: var(--link-hover-surface);
    color: var(--text-dark) !important;
    border-color: var(--primary-light);
}

body[data-theme] .nav-list a.active,
body[data-theme] .nav-link.active,
body[data-theme] .nav a.active,
body[data-theme] .site-nav a.active,
body[data-theme] .nav-list a[aria-current="page"],
body[data-theme] .nav-link[aria-current="page"],
body[data-theme] .site-nav a[aria-current="page"] {
    background: var(--active-surface);
    color: var(--text-dark) !important;
    border-color: var(--active-border);
    box-shadow: inset 0 -3px 0 var(--active-border);
    font-weight: 800;
}

body[data-theme] .nav-cta,
body[data-theme] .btn-primary,
body[data-theme] .btn-secondary,
body[data-theme] .download-btn,
body[data-theme] .download-btn.secondary {
    color: var(--text-dark) !important;
    border: 1px solid var(--active-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

body[data-theme] .nav-cta,
body[data-theme] .btn-primary,
body[data-theme] .download-btn {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
}

body[data-theme] .btn-secondary,
body[data-theme] .download-btn.secondary {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary) 100%) !important;
}

body[data-theme] .nav-cta:hover,
body[data-theme] .btn-primary:hover,
body[data-theme] .btn-secondary:hover,
body[data-theme] .download-btn:hover,
body[data-theme] .download-btn.secondary:hover {
    transform: translateY(-1px);
}

body[data-theme] .lang-switcher {
    position: relative;
}

body[data-theme] .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--chrome-surface-strong);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
}

body[data-theme] .lang-dropdown {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 220px;
    display: none;
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    background: var(--chrome-surface-strong);
    border: 1px solid var(--border);
    box-shadow: var(--chrome-shadow);
}

body[data-theme] .lang-switcher.active .lang-dropdown {
    display: grid;
    gap: 0.35rem;
}

body[data-theme] .lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-md);
    color: var(--text-dark);
}

body[data-theme] .lang-option:hover {
    background: var(--link-hover-surface);
}

body[data-theme] .lang-option-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

body[data-theme] .lang-option-native {
    color: var(--text-light);
    font-size: 0.82rem;
}

body[data-theme] .mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--chrome-surface-strong);
    cursor: pointer;
}

body[data-theme] .mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-dark);
    border-radius: var(--radius-full);
}

body[data-theme] .mobile-nav {
    display: none;
    margin-top: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--chrome-surface-strong);
    box-shadow: var(--chrome-shadow);
}

body[data-theme] .mobile-nav.active {
    display: block !important;
}

body[data-theme] .mobile-nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

body[data-theme] .mobile-nav-list a {
    display: block;
    min-height: 2.5rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-dark) !important;
    font-weight: 700;
}

body[data-theme] .mobile-nav-list a.active,
body[data-theme] .mobile-nav-list a[aria-current="page"] {
    border-color: var(--active-border);
    box-shadow: inset 0 -2px 0 var(--active-border);
}

body[data-theme] .footer {
    margin-top: var(--space-4xl);
    border-top: 1px solid var(--border);
    background: var(--chrome-surface-strong);
}

body[data-theme] .footer-content {
    padding: 2.25rem 1.5rem 1.25rem;
}

body[data-theme] .footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(180px, 1fr));
    gap: 1.5rem;
}

body[data-theme] .footer-brand p,
body[data-theme] .footer-bottom p,
body[data-theme] .footer-note {
    color: var(--text-medium);
}

body[data-theme] .footer-note {
    font-size: 0.875rem;
}

body[data-theme] .footer-column,
body[data-theme] .footer-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

body[data-theme] .footer-column h4,
body[data-theme] .footer-section h4 {
    font-family: var(--font-display);
    color: var(--text-dark);
}

body[data-theme] .footer-links,
body[data-theme] .footer-column ul {
    display: grid;
    gap: 0.45rem;
}

body[data-theme] .footer-column a,
body[data-theme] .footer-section a,
body[data-theme] .footer-legal a {
    color: var(--text-medium);
    border-radius: var(--radius-sm);
    text-underline-offset: 0.18em;
}

body[data-theme] .footer-column a:hover,
body[data-theme] .footer-section a:hover,
body[data-theme] .footer-legal a:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

body[data-theme] .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
}

body[data-theme] .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

body[data-theme] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

body[data-theme] a[href]:not(.nav-link):not(.nav-cta):not(.btn-primary):not(.btn-secondary):not(.download-btn):not(.lang-option):hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (max-width: 1120px) {
    body[data-theme] .nav-list,
    body[data-theme] .site-nav,
    body[data-theme] .lang-switcher {
        display: none !important;
    }

    body[data-theme] .mobile-menu-toggle {
        display: inline-flex !important;
    }

    body[data-theme] .mobile-nav-list {
        grid-template-columns: 1fr;
    }

    body[data-theme] .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 780px) {
    body[data-theme] .header-inner,
    body[data-theme] .header-content,
    body[data-theme] .nav-container,
    body[data-theme] .footer-content,
    body[data-theme] .footer-bottom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    body[data-theme] .footer-grid,
    body[data-theme] .footer-bottom {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }
}

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

@media (prefers-contrast: more) {
    body[data-theme] {
        --border: var(--text-dark);
        --active-surface: var(--card-bg);
        --link-hover-surface: var(--card-bg);
    }

    body[data-theme] .nav-list a,
    body[data-theme] .nav-link,
    body[data-theme] .site-nav a,
    body[data-theme] .mobile-nav-list a,
    body[data-theme] .lang-btn,
    body[data-theme] .footer-column a,
    body[data-theme] .footer-section a {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    body[data-theme] .nav-list a,
    body[data-theme] .nav-link,
    body[data-theme] .site-nav a,
    body[data-theme] .mobile-nav-list a,
    body[data-theme] .lang-btn,
    body[data-theme] .nav-cta,
    body[data-theme] .btn-primary,
    body[data-theme] .btn-secondary,
    body[data-theme] .download-btn,
    body[data-theme] .footer-column a,
    body[data-theme] .footer-section a {
        forced-color-adjust: auto;
        border: 1px solid CanvasText;
    }
}