/* ============================================================
   VELVET — Base Design System
   Design tokens, type scale, reset, utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cormorant+SC:wght@300;400;500&family=Great+Vibes&family=Inter:wght@300;400;500&display=swap');

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Design Tokens (Global Neutrals) ---- */
:root {
  /* Typography Scale */
  --text-xs:    0.75rem;   /* 12px — labels */
  --text-sm:    0.875rem;  /* 14px — small UI */
  --text-base:  1rem;      /* 16px — body */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   3.75rem;   /* 60px */

  /* Spacing Scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

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

  /* Transitions */
  --ease-out:      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);
  --ease-dramatic: cubic-bezier(0.22, 1, 0.36, 1);

  /* Global Neutral Fallbacks (overridden by theme) */
  --color-bg:        #1a1410;
  --color-text:      #f5f0e8;
  --color-text-muted: rgba(245, 240, 232, 0.55);
  --color-surface:   rgba(255, 255, 255, 0.04);
  --color-border:    rgba(255, 255, 255, 0.08);
}

/* ---- Typography Utilities ---- */
.font-display  { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-sc       { font-family: 'Cormorant SC', Georgia, serif; }
.font-script   { font-family: 'Great Vibes', cursive; }
.font-ui       { font-family: 'Inter', system-ui, sans-serif; }

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }
.text-6xl   { font-size: var(--text-6xl); }

.weight-light   { font-weight: 300; }
.weight-regular { font-weight: 400; }
.weight-medium  { font-weight: 500; }

.tracking-widest { letter-spacing: 0.2em; }
.tracking-wide   { letter-spacing: 0.1em; }
.tracking-normal { letter-spacing: 0; }

.text-center { text-align: center; }
.italic      { font-style: italic; }
.uppercase   { text-transform: uppercase; }

/* ---- Utility ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.no-select {
  user-select: none;
  -webkit-user-select: none;
}