/* ============================================================
   YOSVANY — Design Tokens
   All CSS custom properties. Import this first.
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:          #0A0A0A;
  --color-surface:     #141414;
  --color-surface-2:   #1C1C1C;
  --color-gold:        #C9A84C;
  --color-gold-light:  #E8C97A;
  --color-gold-dim:    #8A6E2F;
  --color-cream:       #F5F0E8;
  --color-cream-dim:   #B8B0A0;
  --color-muted:       #958A7E;
  --color-border:      #2A2520;

  /* ── Typography ─────────────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.25rem;   /* 20px */

  /* ── Spacing scale ──────────────────────────────────────── */
  --space-xs:  0.25rem;  /* 4px  */
  --space-sm:  0.5rem;   /* 8px  */
  --space-md:  1rem;     /* 16px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  4rem;     /* 64px */
  --space-2xl: 8rem;     /* 128px */

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-above:   10;
  --z-nav:    100;
  --z-overlay: 200;
  --z-modal:  300;
  --z-cursor: 9999;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease-out;
  --transition-base:   300ms ease-out;
  --transition-slow:   500ms ease-out;

  /* ── Layout ──────────────────────────────────────────────── */
  --nav-height:        80px;
  --container-max:     1440px;
  --container-prose:   720px;
}

/* ── Responsive token overrides ──────────────────────────── */
@media (max-width: 768px) {
  :root {
    --space-xl:  3rem;
    --space-2xl: 5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --space-2xl: 4rem;
  }
}