/* ═══════════════════════════════════════════════════════════════
   WallpaperZA — Design Tokens
   "Neo-Classical Luxury" — Alabaster & Liquid Gold System
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Neo-Classical Palette ─── */
  --alabaster:       #F9F9F9;
  --cream:           #FFFDF5;
  --cream-warm:      #F5F0E8;
  --marble:          #F0ECE3;
  --marble-vein:     #E0D5C5;
  --surface-card:    #FFFFFF;

  --charcoal:        #111111;
  --charcoal-soft:   #1F1B1A;
  --charcoal-muted:  #3D3833;
  --stone:           #443D37;
  --stone-light:     #635B54;

  /* Legacy dark for overlays & badges */
  --obsidian:        #0A0A0A;
  --obsidian-light:  #141414;
  --obsidian-mid:    #1A1A1A;
  --obsidian-soft:   #222222;
  --porcelain:       #FFFFFF;
  --porcelain-warm:  #FFFDF5;
  --porcelain-muted: #E8E6E1;
  --smoke:           #443D37;
  --ash:             #4E4741;

  /* ─── Liquid Gold Tones ─── */
  --gold-champagne:  #B89A3E;
  --gold-24k:        #C4A030;
  --gold-bright:     #D4B440;
  --gold-rose:       #A07048;
  --gold-deep:       #7A5D10;
  --gold-pale:       #D4C08A;

  /* ─── Liquid Gold Gradients ─── */
  --gradient-gold:         linear-gradient(135deg, #B89A3E 0%, #C4A030 30%, #D4B440 60%, #A07048 100%);
  --gradient-gold-subtle:  linear-gradient(135deg, #B89A3E 0%, #C4A030 50%, #B89A3E 100%);
  --gradient-gold-shine:   linear-gradient(90deg, transparent 0%, rgba(212,180,64,0.35) 50%, transparent 100%);
  --gradient-gold-border:  linear-gradient(135deg, #A07048, #C4A030, #D4B440, #C4A030, #A07048);
  --gradient-marble:       linear-gradient(180deg, #F9F9F9 0%, #FFFDF5 50%, #F5F0E8 100%);

  /* ─── Typography ─── */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Montserrat', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Scale (fluid clamp) */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm:    clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --text-base:  clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  --text-lg:    clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --text-2xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-3xl:   clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --text-4xl:   clamp(3rem, 2.2rem + 4vw, 6rem);
  --text-hero:  clamp(4rem, 3rem + 6vw, 9.5rem);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;
  --weight-bold:     700;

  /* ─── Spacing ─── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  3.5rem;
  --space-4xl:  4.5rem;
  --space-hero: 5rem;

  /* ─── Borders & Radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── Shadows (Long-Soft Ambient Occlusion) ─── */
  --shadow-sm:     0 2px 8px rgba(31,27,26,0.06), 0 0 2px rgba(31,27,26,0.03);
  --shadow-md:     0 6px 24px rgba(31,27,26,0.08), 0 2px 6px rgba(31,27,26,0.04);
  --shadow-lg:     0 12px 48px rgba(31,27,26,0.10), 0 4px 12px rgba(31,27,26,0.05);
  --shadow-xl:     0 24px 80px rgba(31,27,26,0.12), 0 8px 24px rgba(31,27,26,0.06);
  --shadow-gold:   0 8px 36px rgba(212,175,55,0.20), 0 2px 8px rgba(212,175,55,0.10);
  --shadow-glow:   0 0 40px rgba(212,175,55,0.15), 0 0 12px rgba(212,175,55,0.08);
  --shadow-rising: 0 16px 56px rgba(31,27,26,0.14), 0 4px 12px rgba(31,27,26,0.06);
  --shadow-float:  0 20px 60px rgba(31,27,26,0.12), 0 8px 20px rgba(31,27,26,0.06);

  /* ─── Glassmorphism (light) ─── */
  --glass-bg:       rgba(255, 255, 253, 0.72);
  --glass-bg-solid: rgba(255, 255, 253, 0.92);
  --glass-border:   rgba(212, 175, 55, 0.12);
  --glass-blur:     blur(24px);

  /* ─── Transitions ─── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* ─── Z-Index ─── */
  --z-behind:    -1;
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-widget:    600;
  --z-top:       9999;

  /* ─── Layout ─── */
  --container-max:   1440px;
  --container-wide:  1200px;
  --container-tight: 900px;
  --header-height:   80px;
  --topbar-height:   36px;

  /* ─── Semantic Colours ─── */
  --text-primary:    var(--charcoal);       /* #111111 Deep Charcoal */
  --text-heading:    var(--charcoal-soft);  /* #1F1B1A Midnight Bronze */
  --text-muted:      var(--stone);
  --surface-primary: var(--alabaster);
}