/* ==========================================================================
   DERMATREATZ — Design Tokens / CSS Custom Properties
   Luxury medical brand: Matte Black + Gold on White
   ========================================================================== */

:root {
  /* ---- Brand Palette ---- */
  --color-black: #0B0B0B;
  --color-black-soft: #141414;
  --color-ink: #1A1A1A;
  --color-gold: #D4AF37;
  --color-gold-deep: #B8912B;
  --color-gold-light: #F2E4B8;
  --color-gold-tint: #FBF6E7;
  --color-white: #FFFFFF;
  --color-cream: #FBFAF7;
  --color-mist: #F4F2ED;

  /* ---- Semantic ---- */
  --bg-body: var(--color-white);
  --bg-alt: var(--color-cream);
  --bg-dark: var(--color-black);
  --text-primary: #101010;
  --text-secondary: #55524B;
  --text-muted: #8A867D;
  --text-on-dark: #F6F3EC;
  --text-on-dark-muted: #B7B2A6;
  --border-soft: rgba(15, 15, 15, 0.08);
  --border-gold: rgba(212, 175, 55, 0.35);

  /* ---- Typography ---- */
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* ---- Radii ---- */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, luxury) ---- */
  --shadow-xs: 0 2px 10px rgba(15, 15, 15, 0.05);
  --shadow-sm: 0 10px 30px rgba(15, 15, 15, 0.07);
  --shadow-md: 0 22px 55px rgba(15, 15, 15, 0.10);
  --shadow-lg: 0 40px 90px rgba(15, 15, 15, 0.16);
  --shadow-gold: 0 24px 60px rgba(212, 175, 55, 0.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 10vw, 150px);

  /* ---- Motion ---- */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.9s;

  /* ---- Z-index ---- */
  --z-nav: 900;
  --z-float: 800;
  --z-overlay: 950;
}