/**
 * Design Tokens - Colors and Typography
 * Based on Figma Variables
 */

:root {
    /* Theme: Neon (default) */
    --color-background: #100F10;
    --color-background-a30: rgba(16, 15, 16, 0.3);
    --color-card: #1E1D1E;
    --color-border-a8: rgba(255, 255, 255, 0.08);
    --color-content: #FFFFFF;
    --color-content-a40: rgba(255, 255, 255, 0.4);
    --color-invert: #100F10;
    --color-invert-a40: rgba(16, 15, 16, 0.4);
    --color-solid-light: #FFFFFF;
    --color-solid-dark: #100F10;
    --color-accent: #FF00FF;
    --color-accent-a70: rgba(255, 0, 255, 0.7);
    --color-accent-a30: rgba(255, 0, 255, 0.3);
    --color-subaccent: #00FF00;
    --color-subaccent-a70: rgba(0, 255, 0, 0.7);
    --color-subaccent-a30: rgba(0, 255, 0, 0.3);
}

[data-theme="calm"] {
    /* Theme: Calm */
    --color-background: #F7F8FD;
    --color-background-a30: rgba(247, 248, 253, 0.3);
    --color-card: #FFFFFF;
    --color-border-a8: rgba(16, 15, 16, 0.08);
    --color-content: #100F10;
    --color-content-a40: rgba(16, 15, 16, 0.4);
    --color-invert: #F7F8FD;
    --color-invert-a40: rgba(247, 248, 253, 0.4);
    --color-solid-light: #FFFFFF;
    --color-solid-dark: #100F10;
    --color-accent: #0000FF;
    --color-accent-a70: rgba(0, 0, 255, 0.7);
    --color-accent-a30: rgba(0, 0, 255, 0.3);
    --color-subaccent: #FF0000;
    --color-subaccent-a70: rgba(255, 0, 0, 0.7);
    --color-subaccent-a30: rgba(255, 0, 0, 0.3);
}

/* Typography - Desktop (769-1920px) */
:root {
    --font-display: 'Instrument Serif', serif;
    --font-body: 'Geist', sans-serif;
    
    /* Display sizes - Desktop */
    --font-size-display-1-desktop: 196px;
    --font-size-display-2-desktop: 100px;
    --font-size-display-3-desktop: 60px;
    
    /* Body sizes - Desktop */
    --font-size-body-1-desktop: 36px;
    --font-size-body-2-desktop: 24px;
    --font-size-body-3-desktop: 16px;
    --font-size-body-4-desktop: 14px;
    
    /* Line heights - Desktop (as percentage) */
    --line-height-display-1-desktop: 0.8; /* 80% */
    --line-height-display-2-desktop: 1.0; /* 100% */
    --line-height-display-3-desktop: 1.0; /* 100% */
    --line-height-body-1-desktop: 1.0; /* 100% */
    --line-height-body-2-desktop: 1.3; /* 130% */
    --line-height-body-3-desktop: 1.2; /* 120% */
    --line-height-body-4-desktop: 1.2; /* 120% */
    
    /* Display sizes - Mobile */
    --font-size-display-1-mobile: 92px;
    --font-size-display-2-mobile: 48px;
    --font-size-display-3-mobile: 36px;
    
    /* Body sizes - Mobile */
    --font-size-body-1-mobile: 24px;
    --font-size-body-2-mobile: 18px;
    --font-size-body-3-mobile: 14px;
    --font-size-body-4-mobile: 12px;
    
    /* Line heights - Mobile (same percentages as desktop) */
    --line-height-display-1-mobile: 0.8; /* 80% */
    --line-height-display-2-mobile: 1.0; /* 100% */
    --line-height-display-3-mobile: 1.0; /* 100% */
    --line-height-body-1-mobile: 1.0; /* 100% */
    --line-height-body-2-mobile: 1.3; /* 130% */
    --line-height-body-3-mobile: 1.2; /* 120% */
    --line-height-body-4-mobile: 1.2; /* 120% */
    
    /* Display sizes - Tablet (intermediate between mobile and desktop) */
    --font-size-display-1-tablet: 154px;
    --font-size-display-2-tablet: 79px;
    --font-size-display-3-tablet: 50px;
    
    /* Body sizes - Tablet */
    --font-size-body-1-tablet: 31px;
    --font-size-body-2-tablet: 22px;
    --font-size-body-3-tablet: 15px;
    --font-size-body-4-tablet: 13px;
    
    /* Line heights - Tablet (same percentages as desktop/mobile) */
    --line-height-display-1-tablet: 0.8; /* 80% */
    --line-height-display-2-tablet: 1.0; /* 100% */
    --line-height-display-3-tablet: 1.0; /* 100% */
    --line-height-body-1-tablet: 1.0; /* 100% */
    --line-height-body-2-tablet: 1.3; /* 130% */
    --line-height-body-3-tablet: 1.2; /* 120% */
    --line-height-body-4-tablet: 1.2; /* 120% */
}

/* Global grid gutter (column gap) */
:root {
    --grid-gap-desktop: 16px; /* desktop */
    --grid-gap-compact: 12px; /* mobile + tablet */
    --grid-gap: var(--grid-gap-desktop);
}

@media (max-width: 768px) {
    :root {
        --grid-gap: var(--grid-gap-compact);
    }
}

/* Tablet (769-1024px): как десктоп — тот же gap (16px), только типографика планшетная */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        /* --grid-gap не переопределяем: остаётся 16px как на десктопе */

        /* Display sizes - map desktop tokens to tablet values */
        --font-size-display-1-desktop: var(--font-size-display-1-tablet);
        --font-size-display-2-desktop: var(--font-size-display-2-tablet);
        --font-size-display-3-desktop: var(--font-size-display-3-tablet);

        /* Body sizes - map desktop tokens to tablet values */
        --font-size-body-1-desktop: var(--font-size-body-1-tablet);
        --font-size-body-2-desktop: var(--font-size-body-2-tablet);
        --font-size-body-3-desktop: var(--font-size-body-3-tablet);
        --font-size-body-4-desktop: var(--font-size-body-4-tablet);
        
        /* Line heights - map desktop tokens to tablet values */
        --line-height-display-1-desktop: var(--line-height-display-1-tablet);
        --line-height-display-2-desktop: var(--line-height-display-2-tablet);
        --line-height-display-3-desktop: var(--line-height-display-3-tablet);
        --line-height-body-1-desktop: var(--line-height-body-1-tablet);
        --line-height-body-2-desktop: var(--line-height-body-2-tablet);
        --line-height-body-3-desktop: var(--line-height-body-3-tablet);
        --line-height-body-4-desktop: var(--line-height-body-4-tablet);
    }
}

/* Grid System */
:root {
    /* Desktop: 12 columns */
    --grid-columns-desktop: 12;
    
    /* Mobile: 6 columns */
    --grid-columns-mobile: 6;
}