/* =====================================================================
   VYVE Command Centre — Design Tokens
   Single source of truth. Brand colours, type, spacing, radii, shadows.

   Aligned to vyvehealth.co.uk marketing site brand:
     "Build health before it breaks."
     Proactive · Evidence-led · People first · Long-term thinking
   ===================================================================== */

:root {
  /* ---------- Brand colours ---------- */
  --vyve-dark:       #0D2B2B;
  --vyve-teal:       #1B7878;
  --vyve-teal-light: #4DAAAA;
  --vyve-teal-pale:  #DEEFEF;
  --vyve-gold:       #C9A84C;
  --vyve-gold-pale:  #F4ECD3;
  --vyve-cream:      #FAF7F1;     /* warm hero background */
  --vyve-charcoal:   #1A2B2B;

  /* ---------- Three pillars (used throughout the hub) ----------
     Physical = vital, energetic gold
     Mental   = calm, restorative teal
     Social   = warm, connecting coral
  */
  --pillar-physical:        #D49B2C;
  --pillar-physical-pale:   #FAEFD0;
  --pillar-mental:          #4DAAAA;
  --pillar-mental-pale:     #DCEEEE;
  --pillar-social:          #D17F6E;
  --pillar-social-pale:     #F8E0DA;

  /* ---------- Neutrals — light theme (default) ----------
     Warmer cream-white to match the marketing site feel rather than cold mint.
  */
  --bg:             #F7F5F0;      /* cream-white, very subtle warmth */
  --bg-alt:         #FAF8F4;      /* slightly lighter for hero contrast */
  --surface:        #FFFFFF;
  --surface-2:      #F1EEE7;      /* soft sand */
  --surface-3:      #E7E3D9;
  --surface-sunken: #EFECE5;
  --border:         #E4DFD4;
  --border-strong:  #C9C2B2;
  --text:           #1A2B2B;
  --text-muted:     #6B7373;
  --text-dim:       #9DA3A3;

  /* ---------- Semantic colours ---------- */
  --success:       #2D9E4A;
  --success-pale:  #D8EDDE;
  --warning:       #E09B3D;
  --warning-pale:  #FAEAD0;
  --danger:        #C9534A;
  --danger-pale:   #F3D6D3;
  --info:          #3D7FD9;
  --info-pale:     #D7E4F5;

  /* ---------- Sidebar (dark, on-brand) ---------- */
  --sidebar-bg:     #0A2222;
  --sidebar-bg-2:   #0E2A2A;
  --sidebar-text:   rgba(245,242,236,.75);
  --sidebar-active: rgba(77,170,170,.16);
  --sidebar-active-fg: #EAF5F5;
  --sidebar-hover:  rgba(255,255,255,.05);
  --sidebar-section:rgba(255,255,255,.32);
  --sidebar-border: rgba(255,255,255,.08);

  /* ---------- Accent (interactive elements) ---------- */
  --accent:         var(--vyve-teal);
  --accent-hover:   #166262;
  --accent-light:   var(--vyve-teal-light);
  --accent-pale:    var(--vyve-teal-pale);
  --on-accent:      #FFFFFF;

  /* ---------- Typography ---------- */
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-xxs:  10.5px;
  --fs-xs:   11.5px;
  --fs-sm:   12.5px;
  --fs-base: 13.5px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  40px;
  --fs-hero: 56px;

  /* ---------- Type weights ---------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---------- Letter spacing ---------- */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal:0;
  --ls-wide:  0.04em;
  --ls-mega:  0.12em;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 80px;

  /* ---------- Layout ---------- */
  --sidebar-w:   244px;
  --topbar-h:    62px;
  --content-max: 1320px;
  --content-pad: 32px;

  /* ---------- Elevation — real shadows, not flat ---------- */
  --shadow-xs: 0 1px 1px rgba(13,43,43,.04);
  --shadow-sm: 0 1px 2px rgba(13,43,43,.04), 0 2px 4px rgba(13,43,43,.04);
  --shadow-md: 0 2px 4px rgba(13,43,43,.04), 0 8px 16px rgba(13,43,43,.06);
  --shadow-lg: 0 4px 8px rgba(13,43,43,.06), 0 16px 32px rgba(13,43,43,.10);
  --shadow-xl: 0 8px 16px rgba(13,43,43,.08), 0 32px 64px rgba(13,43,43,.16);
  --shadow-focus: 0 0 0 3px rgba(77,170,170,.22);

  /* ---------- Motion ---------- */
  --t-instant: .08s ease;
  --t-fast:    .15s ease;
  --t-base:    .24s cubic-bezier(.4,0,.2,1);
  --t-slow:    .4s  cubic-bezier(.4,0,.2,1);

  /* ---------- Z-index scale ---------- */
  --z-sidebar: 40;
  --z-overlay: 49;
  --z-drawer:  50;
  --z-topbar:  30;
  --z-modal:   100;
  --z-toast:   120;
}

/* ===== Dark theme override (still light by default; dark via [data-theme="dark"] on <html>) ===== */
html[data-theme="dark"] {
  --bg:             #0B1F1F;
  --bg-alt:         #0E2424;
  --surface:        #122B2B;
  --surface-2:      #163333;
  --surface-3:      #1B3D3C;
  --surface-sunken: #0D2424;
  --border:         rgba(255,255,255,.08);
  --border-strong:  rgba(255,255,255,.16);
  --text:           #EAF2F2;
  --text-muted:     #94ADAD;
  --text-dim:       #5A7575;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.32);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
  --vyve-cream:  #0F2727;
  --pillar-physical-pale: rgba(212,155,44,.18);
  --pillar-mental-pale:   rgba(77,170,170,.18);
  --pillar-social-pale:   rgba(209,127,110,.18);
}