/* =========================================================
   Tutti Gallery — Design Tokens
   ========================================================= */
:root {

    /* ---------- Цвета ---------- */
    --tg-white:      #ffffff;
    --tg-black:      #0d0d0d;
    --tg-grey-900:   #1a1a1a;
    --tg-grey-700:   #404040;
    --tg-grey-500:   #8a8a8a;
    --tg-grey-300:   #d4d4d4;
    --tg-grey-100:   #f4f4f4;

    --tg-red:        #e63329;   /* акцент */
    --tg-red-dark:   #c2271f;
    --tg-red-soft:   rgba(230, 51, 41, .12);

    /* ---------- Семантика ---------- */
    --tg-bg:         var(--tg-white);
    --tg-fg:         var(--tg-black);
    --tg-muted:      var(--tg-grey-500);
    --tg-border:     var(--tg-grey-300);

    /* ---------- Типографика ---------- */
    --tg-font:       'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --tg-fs-xs:      clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
    --tg-fs-sm:      clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
    --tg-fs-base:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --tg-fs-lg:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --tg-fs-xl:      clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --tg-fs-2xl:     clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --tg-fs-hero:    clamp(3rem, 1.5rem + 6vw, 8rem);

    --tg-lh-tight:   1.05;
    --tg-lh-snug:    1.25;
    --tg-lh-base:    1.6;

    --tg-fw-regular: 400;
    --tg-fw-medium:  500;
    --tg-fw-semi:    600;
    --tg-fw-bold:    700;
    --tg-fw-black:   800;

    /* ---------- Сетка и отступы ---------- */
    --tg-gutter:     clamp(16px, 3vw, 48px);
    --tg-section-y:  clamp(64px, 8vw, 160px);
    --tg-max:        1920px; /* full-wide, но с потолком */

    /* ---------- Радиусы ---------- */
    --tg-radius-sm:  6px;
    --tg-radius-md:  12px;
    --tg-radius-lg:  20px;
    --tg-radius-pill: 999px;

    /* ---------- Тени ---------- */
    --tg-shadow-sm:  0 1px 3px rgba(0,0,0,.06);
    --tg-shadow-md:  0 8px 24px rgba(0,0,0,.08);
    --tg-shadow-lg:  0 24px 60px rgba(0,0,0,.12);

    /* ---------- Анимации ---------- */
    --tg-ease:       cubic-bezier(.22, 1, .36, 1);
    --tg-dur-fast:   .2s;
    --tg-dur-base:   .35s;
    --tg-dur-slow:   .6s;

    /* ---------- Z-index ---------- */
    --tg-z-header:   100;
    --tg-z-overlay:  200;
    --tg-z-progress: 9999;

    /* Тёмная тема — основная для хедера и hero */
   --tg-dark-bg:      #0a0a0a;
    --tg-dark-bg-2:    #111111;
    --tg-dark-fg:      #ffffff;
    --tg-dark-muted:   rgba(255, 255, 255, .55);
    --tg-dark-border:  rgba(255, 255, 255, .1);
    --tg-dark-border-strong: rgba(255, 255, 255, .2);
}

/* Тёмная тема — опционально, позже */
@media (prefers-color-scheme: dark) {
    /* :root { ... } */
}