:root {
    --color-bg-primary: #F5F2EE;
    --color-bg-secondary: #ECE5D8;
    --color-bg-tertiary: #E5DED0;
    
    --color-text-primary: #3B4250;
    --color-text-secondary: #625E54;
    --color-text-muted: #8B8579;
    
    --color-accent-gold: #D3BC8E;
    --color-accent-gold-dark: #B8A06E;
    --color-accent-gold-light: #E8D4B0;
    
    --color-border: rgba(211, 188, 142, 0.3);
    --color-border-dark: rgba(211, 188, 142, 0.5);
    
    --color-white: #FFFFFF;
    --color-black: #1A1A1A;
    
    --element-pyro: #FF4D4D;
    --element-pyro-bg: rgba(255, 77, 77, 0.1);
    --element-anemo: #72E2C3;
    --element-anemo-bg: rgba(114, 226, 195, 0.1);
    --element-geo: #F8BA4E;
    --element-geo-bg: rgba(248, 186, 78, 0.1);
    --element-electro: #AF8FE2;
    --element-electro-bg: rgba(175, 143, 226, 0.1);
    --element-hydro: #4CC9F0;
    --element-hydro-bg: rgba(76, 201, 240, 0.1);
    --element-cryo: #99DFFF;
    --element-cryo-bg: rgba(153, 223, 255, 0.1);
    --element-dendro: #A5C83B;
    --element-dendro-bg: rgba(165, 200, 59, 0.1);
    
    --rarity-4: linear-gradient(135deg, #6B5B95 0%, #8B7BB5 100%);
    --rarity-5: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
    
    --font-family: 'Hanken Grotesk', sans-serif;
    
    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);
    --spacing-sm: var(--spacing-unit);
    --spacing-md: calc(var(--spacing-unit) * 2);
    --spacing-lg: calc(var(--spacing-unit) * 3);
    --spacing-xl: calc(var(--spacing-unit) * 4);
    --spacing-2xl: calc(var(--spacing-unit) * 6);
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 50%;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    --container-max-width: 1280px;
    --header-height: 64px;
    --sidebar-width: 280px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

ul, ol {
    list-style: none;
}

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

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

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 242, 238, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
}

.header-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.main-nav {
    display: flex;
    gap: var(--spacing-sm);
}

.main-content {
    flex: 1;
    display: flex;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
    width: 100%;
}

.main-content.detail-page {
    display: block;
}

.footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}