/* ═══════════════════════════════════════════════════════
   GIA BASILIA FINE ART — Design Tokens
   giabasilia.art — v2.0 April 2026
   5 Switchable Themes + Evening Mode
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   THEME A: MUSEUM (Default — warm ivory, gold accents)
   ═══════════════════════════════════════════════════════ */
/* ─── SHARED DEFAULTS (all themes inherit these) ─── */
:root {
    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-ui:      'Didact Gothic', 'Helvetica Neue', sans-serif;

    --text-preloader:      clamp(40px, 8vw, 64px);
    --text-hero:           clamp(44px, 10vw, 80px);
    --text-section:        clamp(28px, 5vw, 42px);
    --text-artwork-portal: clamp(32px, 5vw, 52px);
    --text-artwork-card:   clamp(18px, 2.5vw, 22px);
    --text-nav:          11px;
    --text-spec-label:   10px;
    --text-spec-value:   15px;
    --text-button:       11px;
    --text-catalog:      10px;
    --text-body:         18px;

    --ls-nav:       0.18em;
    --ls-spec:      0.22em;
    --ls-button:    0.25em;
    --ls-preloader: 0.3em;

    --ease-portal:    cubic-bezier(0.76, 0, 0.24, 1);
    --dur-portal:     550ms;
    --ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);
    --dur-drawer:     380ms;
    --ease-reveal:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur-reveal:     700ms;
    --ease-hover:     ease-out;
    --dur-hover:      150ms;
    --ease-magnetic:  ease-out;
    --dur-magnetic:   200ms;
    --ease-mode:      ease;
    --dur-mode:       3000ms;
    --ease-preloader: ease-out;
    --dur-preloader:  800ms;
    --ease-text:      ease-out;
    --dur-text:       600ms;

    --space-gallery: 80px;
    --space-page:    clamp(24px, 5vw, 80px);
    --radius-sheet:  20px;
    --cursor-size:       10px;
    --cursor-size-hover: 50px;

    --gallery-layout:    horizontal;
    --nav-blend:         difference;
    --hero-overlay:      linear-gradient(to top, rgba(10,10,10,0.7) 0%, transparent 60%);
    --card-radius:       0px;
    --nav-position:      fixed;
}

/* ─── MUSEUM THEME (default) ─── */
[data-theme="museum"] {
    --bg:       #F7F4EF;
    --bg-2:     #EDE9E2;
    --bg-3:     #E2DED7;
    --ink:      #0D0D0D;
    --ink-2:    #555550;
    --ink-3:    #9E9A94;
    --gold:     #9A7B3F;
    --gold-2:   #6B5429;
    --available:  #3A7A52;
    --collected:  #888888;
    --exhibition: #9A7B3F;
    --overlay:  rgba(13, 13, 13, 0.72);
}

/* Museum evening */
[data-theme="museum"][data-mode="evening"] {
    --bg:       #141210;
    --bg-2:     #1E1C18;
    --bg-3:     #262320;
    --ink:      #F0EBE0;
    --ink-2:    #9A9590;
    --ink-3:    #5A5650;
    --gold:     #C9A96E;
    --gold-2:   #A08040;
    --available:  #5AAB74;
    --collected:  #666666;
    --exhibition: #C9A96E;
    --overlay:  rgba(0, 0, 0, 0.85);
}

/* ═══════════════════════════════════════════════════════
   THEME B: DARK GALLERY (Permanent dark, glowing art)
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg:       #0A0A0A;
    --bg-2:     #141414;
    --bg-3:     #1E1E1E;
    --ink:      #E8E0D0;
    --ink-2:    #A09888;
    --ink-3:    #5A5550;
    --gold:     #E8E0D0;
    --gold-2:   #B0A890;
    --available:  #6AAE7E;
    --collected:  #666666;
    --exhibition: #E8E0D0;
    --overlay:  rgba(0, 0, 0, 0.9);

    --hero-overlay: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    --card-radius: 0px;
    --gallery-layout: horizontal;
    --nav-blend: normal;
}

/* Dark theme ignores evening mode — always dark */
[data-theme="dark"][data-mode="evening"] {
    --bg:       #0A0A0A;
    --bg-2:     #141414;
    --bg-3:     #1E1E1E;
    --ink:      #E8E0D0;
    --ink-2:    #A09888;
    --ink-3:    #5A5550;
    --gold:     #E8E0D0;
    --gold-2:   #B0A890;
}

/* ═══════════════════════════════════════════════════════
   THEME C: WHITE CUBE (Pure white, monochrome, minimal)
   ═══════════════════════════════════════════════════════ */
[data-theme="whitecube"] {
    --bg:       #FFFFFF;
    --bg-2:     #FAFAFA;
    --bg-3:     #F0F0F0;
    --ink:      #111111;
    --ink-2:    #555555;
    --ink-3:    #999999;
    --gold:     #111111;
    --gold-2:   #333333;
    --available:  #2D8A4E;
    --collected:  #999999;
    --exhibition: #111111;
    --overlay:  rgba(255, 255, 255, 0.92);

    --font-display: 'Didact Gothic', 'Helvetica Neue', sans-serif;
    --font-ui:      'Didact Gothic', 'Helvetica Neue', sans-serif;

    --text-hero:    clamp(36px, 8vw, 64px);
    --text-section: clamp(24px, 4vw, 36px);
    --ls-nav:       0.25em;
    --ls-button:    0.3em;

    --dur-reveal:   500ms;
    --dur-hover:    100ms;
    --dur-mode:     800ms;
    --space-gallery: 40px;

    --hero-overlay: linear-gradient(to top, rgba(255,255,255,0.6) 0%, transparent 40%);
    --card-radius:  0px;
    --gallery-layout: grid;
    --nav-blend: normal;
}

/* White Cube evening — soft warm gray */
[data-theme="whitecube"][data-mode="evening"] {
    --bg:       #1A1A1A;
    --bg-2:     #222222;
    --bg-3:     #2A2A2A;
    --ink:      #E0E0E0;
    --ink-2:    #999999;
    --ink-3:    #555555;
    --gold:     #E0E0E0;
    --gold-2:   #AAAAAA;
    --overlay:  rgba(0, 0, 0, 0.9);
    --hero-overlay: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
}

/* ═══════════════════════════════════════════════════════
   THEME D: EDITORIAL (Magazine / catalog feel)
   ═══════════════════════════════════════════════════════ */
[data-theme="editorial"] {
    --bg:       #F5F0E8;
    --bg-2:     #EBE5DA;
    --bg-3:     #DDD6C8;
    --ink:      #2C1810;
    --ink-2:    #6B5545;
    --ink-3:    #A09080;
    --gold:     #8B4513;
    --gold-2:   #6B3410;
    --available:  #3A7A52;
    --collected:  #A09080;
    --exhibition: #8B4513;
    --overlay:  rgba(44, 24, 16, 0.75);

    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-ui:      'Didact Gothic', 'Helvetica Neue', sans-serif;

    --text-hero:           clamp(52px, 12vw, 96px);
    --text-section:        clamp(32px, 6vw, 52px);
    --text-artwork-portal: clamp(36px, 6vw, 60px);
    --text-artwork-card:   clamp(16px, 2vw, 20px);
    --text-body:           20px;

    --ls-nav:    0.2em;
    --ls-button: 0.22em;

    --dur-reveal: 900ms;
    --dur-text:   800ms;
    --space-gallery: 60px;

    --hero-overlay: linear-gradient(to top, rgba(44,24,16,0.65) 0%, transparent 70%);
    --card-radius: 2px;
    --gallery-layout: editorial;
    --nav-blend: normal;
}

/* Editorial evening */
[data-theme="editorial"][data-mode="evening"] {
    --bg:       #1C1612;
    --bg-2:     #261E18;
    --bg-3:     #302620;
    --ink:      #E8DDD0;
    --ink-2:    #A09080;
    --ink-3:    #6B5B4B;
    --gold:     #C4874A;
    --gold-2:   #A06830;
    --overlay:  rgba(0, 0, 0, 0.85);
    --hero-overlay: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}

/* ═══════════════════════════════════════════════════════
   THEME E: CINEMATIC (Full-bleed, dark, dramatic)
   ═══════════════════════════════════════════════════════ */
[data-theme="cinematic"] {
    --bg:       #080808;
    --bg-2:     #101010;
    --bg-3:     #1A1A1A;
    --ink:      #D4CFC5;
    --ink-2:    #8A857D;
    --ink-3:    #4A4840;
    --gold:     #D4CFC5;
    --gold-2:   #A09B90;
    --available:  #5AAE72;
    --collected:  #555555;
    --exhibition: #D4CFC5;
    --overlay:  rgba(0, 0, 0, 0.92);

    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-ui:      'Didact Gothic', 'Helvetica Neue', sans-serif;

    --text-hero:           clamp(48px, 11vw, 88px);
    --text-preloader:      clamp(44px, 9vw, 72px);
    --text-section:        clamp(28px, 5vw, 44px);
    --text-artwork-card:   clamp(16px, 2vw, 20px);
    --text-nav:            10px;

    --ls-nav:       0.22em;
    --ls-preloader: 0.4em;

    --dur-portal:    700ms;
    --dur-reveal:    1000ms;
    --dur-hover:     200ms;
    --dur-text:      900ms;
    --dur-preloader: 1200ms;
    --dur-mode:      1500ms;
    --space-gallery: 0px;

    --hero-overlay: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    --card-radius:  0px;
    --gallery-layout: grid;
    --nav-blend: normal;
}

/* Cinematic ignores evening — always dark */
[data-theme="cinematic"][data-mode="evening"] {
    --bg:       #080808;
    --bg-2:     #101010;
    --bg-3:     #1A1A1A;
    --ink:      #D4CFC5;
    --ink-2:    #8A857D;
    --ink-3:    #4A4840;
    --gold:     #D4CFC5;
    --gold-2:   #A09B90;
}

/* ═══════════════════════════════════════════════════════
   THEME F: GREEN (Deep green + gold, luxury)
   ═══════════════════════════════════════════════════════ */
[data-theme="green"] {
    --bg:       #0B2616;
    --bg-2:     #0F3320;
    --bg-3:     #14402A;
    --ink:      #E8DCC8;
    --ink-2:    #A89B80;
    --ink-3:    #5C6B52;
    --gold:     #C8A84E;
    --gold-2:   #A08930;
    --available:  #7ECE96;
    --collected:  #6B6B5A;
    --exhibition: #C8A84E;
    --overlay:  rgba(6, 20, 12, 0.92);

    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-ui:      'Didact Gothic', 'Helvetica Neue', sans-serif;

    --text-hero:           clamp(44px, 10vw, 80px);
    --text-preloader:      clamp(40px, 8vw, 64px);
    --text-section:        clamp(28px, 5vw, 42px);
    --text-artwork-portal: clamp(32px, 5vw, 52px);
    --text-artwork-card:   clamp(18px, 2.5vw, 22px);
    --text-nav:          11px;
    --text-spec-label:   10px;
    --text-spec-value:   15px;
    --text-button:       11px;
    --text-catalog:      10px;
    --text-body:         18px;

    --ls-nav:       0.2em;
    --ls-spec:      0.22em;
    --ls-button:    0.28em;
    --ls-preloader: 0.35em;

    --dur-portal:    550ms;
    --dur-reveal:    800ms;
    --dur-hover:     150ms;
    --dur-text:      700ms;
    --dur-mode:      2000ms;
    --space-gallery: 80px;

    --hero-overlay: linear-gradient(to top, rgba(6,20,12,0.85) 0%, rgba(6,20,12,0.2) 50%, transparent 100%);
    --card-radius:  0px;
    --gallery-layout: horizontal;
    --nav-blend: normal;
}

/* Green ignores evening — always dark green */
[data-theme="green"][data-mode="evening"] {
    --bg:       #0B2616;
    --bg-2:     #0F3320;
    --bg-3:     #14402A;
    --ink:      #E8DCC8;
    --ink-2:    #A89B80;
    --ink-3:    #5C6B52;
    --gold:     #C8A84E;
    --gold-2:   #A08930;
}