/* ============================================================================
   DESIGNED WELLNESS — Design Tokens  ·  GOLD-LUXURY direction
   The brand mark is metallic gold on dark; this system leans into that: warm
   espresso-charcoal surfaces, an antique/champagne GOLD as the single primary
   accent, and cream text. Bright #ffd700 is reserved for celebratory achievement.

   Structure & component DNA are inherited from the live product
   (jdhavemann2-dev/Designed-fitness); the palette is tuned for the exclusive,
   middle-aged-professional Waterfall Estate lifestyle.

   Load fonts:
   <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---- CORE NEUTRALS (warm espresso charcoal — never pure #000, never cool) ---- */
  --dw-black:        #0b0907;   /* app background */
  --dw-chart-bg:     #0f0c08;   /* deepest surface — wells */
  --dw-mid:          #16120b;   /* card / panel surface */
  --dw-mid2:         #211a10;   /* raised surface — inputs, pills, table heads */
  --dw-border:       #2e2518;   /* hairline borders everywhere */
  --dw-border-hover: #3d3120;   /* border on card hover */
  --dw-muted:        #a4957c;   /* secondary text — warm taupe */
  --dw-white:        #f4eedf;   /* primary text — warm cream, never #fff */

  /* ---- PRIMARY ACCENT · ANTIQUE / CHAMPAGNE GOLD (the brand) ---- */
  --dw-accent:       #c9a24b;   /* CTAs, links, active states, values — the logo's gold */
  --dw-accent-dark:  #a8863a;   /* hover / pressed fill */
  --dw-accent-light: #e3c47e;   /* champagne highlight, light-on-dark accents */
  --dw-teal-glow:    rgba(201,162,75,0.15);  /* legacy name kept; gold glow wash */
  --dw-gold-glow:    rgba(201,162,75,0.15);
  --dw-accent-wash:  rgba(201,162,75,0.30);  /* avatar / logo halo ring */

  /* ---- CELEBRATION · BRIGHT GOLD (achievement / award only — sparingly) ---- */
  --dw-gold:         #ffd700;   /* award badge text, milestone moments */
  --dw-gold-border:  #a78b00;   /* gold outline */
  --dw-gold-deep-1:  #2a1f00;   /* award gradient top */
  --dw-gold-deep-2:  #1a1500;   /* award gradient bottom */
  --dw-gold-brand:   #c9a24b;   /* the logo's metallic gold = the primary accent */

  /* ---- SEMANTIC (warm-leaning) ---- */
  --dw-red:          #d8584a;   /* errors, danger, overdue, full */
  --dw-orange:       #f09030;   /* warnings, waitlist, near-capacity */
  --dw-blue:         #6f93c9;   /* informational (muted, rare) */
  --dw-green:        #8aa05a;   /* positive trend — olive, not neon */
  --dw-rosegold:     #caa17a;   /* decorative invoice corner accent only */

  /* tinted fills */
  --dw-fill-confirmed: #1c1408; /* gold-brown — confirmed / booked */
  --dw-fill-waitlist:  #1e1200;

  /* ============================ TYPE SYSTEM ============================ */
  --dw-font-display: 'Bebas Neue', 'Oswald', sans-serif; /* condensed caps display */
  --dw-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --dw-font-script:  'Dancing Script', cursive;          /* rare flourish */
  --dw-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- ROLE-BASED TYPE TOKENS ---- */
  --dw-h1: 700 clamp(3rem,8vw,5.5rem)/0.92 var(--dw-font-display);
  --dw-h2: 700 2.8rem/1 var(--dw-font-display);
  --dw-h3: 700 1.8rem/1 var(--dw-font-display);
  --dw-stat: 700 2.2rem/1 var(--dw-font-display);   /* KPI / money values, in gold */
  --dw-section: 700 1.3rem/1 var(--dw-font-display); /* section headers */

  --dw-body:    400 0.95rem/1.65 var(--dw-font-body);
  --dw-body-sm: 400 0.85rem/1.6  var(--dw-font-body);
  --dw-label:   700 0.68rem/1.2  var(--dw-font-body); /* + uppercase + 1.5px tracking */
  --dw-btn:     700 0.82rem/1    var(--dw-font-body); /* + uppercase + 1px tracking */

  --dw-track-display: 2px;
  --dw-track-brand:   4px;
  --dw-track-label:   1.5px;
  --dw-track-btn:     1px;

  /* ============================ SPACING / RADIUS / SHADOW ============================ */
  --dw-r-xs:  6px;  --dw-r-sm:  8px;  --dw-r-md:  9px;  --dw-r-pill:10px;
  --dw-r-lg:  14px; --dw-r-xl:  16px; --dw-r-2xl: 20px; --dw-r-round: 30px; --dw-r-full: 9999px;

  --dw-space-1: 4px; --dw-space-2: 8px; --dw-space-3: 12px; --dw-space-4: 14px;
  --dw-space-5: 18px; --dw-space-6: 22px; --dw-space-7: 32px; --dw-space-8: 48px;

  /* Shadows — warm gold glows, never neutral grey drop shadows */
  --dw-glow-sm:  0 0 0 2px var(--dw-accent-wash), 0 4px 16px rgba(201,162,75,0.20);
  --dw-glow-md:  0 0 12px rgba(201,162,75,0.30);
  --dw-glow-lg:  0 0 20px rgba(201,162,75,0.50);
  --dw-elev:     0 10px 34px rgba(0,0,0,0.55);

  --dw-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dw-dur-fast: 0.15s; --dw-dur: 0.2s; --dw-dur-slow: 0.3s;
}

/* ============================ SEMANTIC ELEMENT DEFAULTS ============================ */
.dw {
  font: var(--dw-body); color: var(--dw-white);
  background: var(--dw-black); -webkit-font-smoothing: antialiased;
}
.dw h1 { font: var(--dw-h1); letter-spacing: var(--dw-track-display); }
.dw h2 { font: var(--dw-h2); letter-spacing: var(--dw-track-display); }
.dw h3 { font: var(--dw-h3); letter-spacing: var(--dw-track-display); }
.dw .dw-em { color: var(--dw-accent); font-style: normal; }
.dw .dw-label {
  font: var(--dw-label); text-transform: uppercase;
  letter-spacing: var(--dw-track-label); color: var(--dw-muted);
}
.dw .dw-stat { font: var(--dw-stat); color: var(--dw-accent); letter-spacing: 1px; }
.dw a, .dw .dw-link { color: var(--dw-accent); text-decoration: none; }
.dw a:hover { text-decoration: underline; }
.dw code, .dw .dw-mono { font-family: var(--dw-font-mono); font-size: 0.8rem; color: var(--dw-muted); }