/* ═══════════════════════════════════════
   DESIGN TOKENS / CSS CUSTOM PROPERTIES
   Oksana Moroz Studio — Premium Landing
   ═══════════════════════════════════════ */

@layer reset, base, components, sections, animations, responsive;


:root {
  /* ── Colors ── */
  --c-bg:           #0a0a0a;
  --c-bg-alt:       #111111;
  --c-surface:      #1a1a1a;
  --c-surface-light:#222222;
  --c-border:       rgba(255, 255, 255, 0.08);
  --c-border-gold:  rgba(212, 175, 55, 0.3);

  --c-gold:         #d4af37;
  --c-gold-light:   #e8c547;
  --c-gold-dark:    #b8941f;
  --c-white:        #ffffff;
  --c-text:         #e8e8e8;
  --c-text-muted:   #999999;
  --c-text-subtle:  #666666;

  /* ── Typography ── */
  --ff-heading:     'Cormorant Garamond', 'Garamond', 'Palatino', serif;
  --ff-body:        'Montserrat', 'Trebuchet MS', 'Segoe UI', sans-serif;

  --fs-hero:        clamp(3.5rem, 10vw, 8rem);
  --fs-h1:          clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:          clamp(2rem, 4vw, 3.5rem);
  --fs-h3:          clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:        clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-sm:          clamp(0.95rem, 1.2vw, 1.1rem);
  --fs-xs:          1rem;

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  --lh-heading:     1.1;
  --lh-body:        1.7;

  --ls-wide:        0.15em;
  --ls-wider:       0.25em;

  /* ── Spacing ── */
  --sp-xs:          0.5rem;
  --sp-sm:          1rem;
  --sp-md:          1.5rem;
  --sp-lg:          2.5rem;
  --sp-xl:          4rem;
  --sp-2xl:         5rem;
  --sp-3xl:         6rem;
  --sp-4xl:         8rem;
  --sp-section:     clamp(3rem, 8vh, 5rem);

  /* ── Layout ── */
  --container-max:  1280px;
  --container-pad:  clamp(1.25rem, 4vw, 3rem);

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

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

  --dur-fast:       0.2s;
  --dur-normal:     0.4s;
  --dur-slow:       0.8s;

  /* ── Shadows ── */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:      0 8px 30px rgba(0,0,0,0.4);
  --shadow-lg:      0 16px 60px rgba(0,0,0,0.5);
  --shadow-gold:    0 0 30px rgba(212, 175, 55, 0.3);
  --shadow-glow:    0 0 60px rgba(212, 175, 55, 0.15);

  /* ── Gold alpha variants ── */
  --c-gold-a06:     rgba(212, 175, 55, 0.06);
  --c-gold-a08:     rgba(212, 175, 55, 0.08);
  --c-gold-a10:     rgba(212, 175, 55, 0.10);
  --c-gold-a12:     rgba(212, 175, 55, 0.12);
  --gold-gradient:  linear-gradient(135deg, var(--c-gold-a08), rgba(212, 175, 55, 0.02));

  /* ── Z-index ── */
  --z-bg:           -1;
  --z-default:      1;
  --z-header:       100;
  --z-overlay:      200;
  --z-modal:        300;
  --z-preloader:    1000;
  --z-nav-overlay:  9999;
}