/* ============================================================
   RAW Personal Studio — Design Tokens
   Premium. Personal. Purposeful.
   ============================================================ */

:root {
  /* ---- Color Palette ---- */
  --color-black:      #0D0D0D;   /* Matte Black — primary background */
  --color-gold:       #C8A45A;   /* Luxury Gold — primary accent, CTAs, headings */
  --color-white:      #F4EDDE;   /* Warm Cream — body text & headings on dark */
  --color-off-white:  #F6F1E7;   /* Soft Cream — light section backgrounds */
  --color-burgundy:   #8B1E24;   /* Deep Burgundy Red — secondary accent (sparingly) */

  /* ---- Derived tokens ---- */
  --color-gold-dim:   rgba(200, 164, 90, 0.15); /* Gold tint for cards/borders */
  --color-gold-line:  rgba(200, 164, 90, 0.25); /* Card outline */
  --color-black-soft: #111111;                  /* Slightly lighter black for cards */
  --color-black-elev: #161616;                  /* Elevated card */
  --color-text-muted: rgba(244, 237, 222, 0.55);/* Muted cream text */
  --color-text-dim:   rgba(244, 237, 222, 0.75);/* Body cream on dark */

  /* ---- Typography ---- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; /* Headings, hero, labels */
  --font-body:    'Manrope', system-ui, sans-serif;         /* Body, CTAs, subheadings */

  /* ---- Layout ---- */
  --max-width:    1280px;
  --gutter:       clamp(1.5rem, 5vw, 6rem);
  --section-v:    clamp(5rem, 10vw, 10rem); /* Vertical padding per section */

  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --card-border:  1px solid rgba(200, 164, 90, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h:    76px;
}