/* ============================================================
   THE SKIN TREE — DESIGN TOKENS
   Brand Identity System
   ============================================================ */

:root {
  /* ── COLOR PALETTE ──────────────────────────────────────── */
  --c-terracotta:        #b25936;
  --c-terracotta-light:  #c96b47;
  --c-terracotta-dark:   #8e4228;
  --c-terracotta-glow:   rgba(178, 89, 54, 0.20);
  --c-terracotta-muted:  rgba(178, 89, 54, 0.12);

  --c-cream:             #efddce;
  --c-cream-light:       #f5ece0;
  --c-off-white:         #FDFBF7;
  --c-off-white-warm:    #F9F3EC;

  --c-umber:             #3D1E16;
  --c-umber-mid:         #5C2E20;
  --c-umber-soft:        #7A3E2C;

  --c-sand:              #D4B896;
  --c-sand-light:        #E2CEBC;
  --c-sand-dark:         #B89A78;

  --c-gold:              #C9A96E;
  --c-gold-light:        #DFC48E;
  --c-gold-dark:         #A8854A;

  --c-text-primary:      #2C1810;
  --c-text-secondary:    #6B4436;
  --c-text-muted:        #9B7462;
  --c-text-light:        #C4A090;
  --c-text-on-dark:      #F5E8DC;
  --c-text-on-dark-muted:#C4A090;

  --c-border:            rgba(178, 89, 54, 0.15);
  --c-border-light:      rgba(212, 184, 150, 0.25);
  --c-border-dark:       rgba(255, 255, 255, 0.10);

  --c-glass-bg:          rgba(253, 251, 247, 0.72);
  --c-glass-bg-dark:     rgba(61, 30, 22, 0.55);
  --c-glass-border:      rgba(255, 255, 255, 0.35);
  --c-glass-border-dark: rgba(255, 255, 255, 0.10);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-accent:   'Cormorant Garamond', 'Georgia', serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   1.875rem;   /* 30px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */
  --fs-6xl:   4.5rem;     /* 72px */
  --fs-7xl:   5.5rem;     /* 88px */

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

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  --ls-tight:   -0.03em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.16em;

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

  --section-padding:  clamp(4rem, 8vw, 8rem);
  --container-max:    1280px;
  --container-narrow: 900px;
  --gutter:           clamp(1.5rem, 4vw, 3rem);

  /* ── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(44, 24, 16, 0.08);
  --shadow-md:   0 8px 24px rgba(44, 24, 16, 0.12);
  --shadow-lg:   0 16px 48px rgba(44, 24, 16, 0.16);
  --shadow-xl:   0 32px 80px rgba(44, 24, 16, 0.22);
  --shadow-glow: 0 0 40px rgba(178, 89, 54, 0.25);
  --shadow-inner: inset 0 2px 12px rgba(44, 24, 16, 0.08);

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

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

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;
}