/* ============================================================
   Suconbao Wellness — Longevity Design Tokens
   Inspired by: Cellestial Longevity Systems
   Aesthetic: clinical premium · cool silver-blue · glass UI · serif headlines
   ============================================================ */

:root {
  /* ---------- BRAND · Midnight Navy (clinical / authoritative) ---------- */
  --color-primary-50:  #f0f4f8;
  --color-primary-100: #dde7ef;
  --color-primary-200: #b9cfde;
  --color-primary-300: #7e9fbb;
  --color-primary-500: #0e1726;   /* brand ink */
  --color-primary-600: #0a111c;
  --color-primary-700: #060a13;
  --color-primary-900: #000308;

  /* ---------- ACCENT · Electric Cyan (NAD+ glow / tech accent) ---------- */
  --color-accent-50:  #e6f6fb;
  --color-accent-100: #c6ecf6;
  --color-accent-200: #8ed9ec;
  --color-accent-300: #4cc1dd;
  --color-accent-500: #1e9bc4;   /* signature accent */
  --color-accent-600: #147ea1;
  --color-accent-700: #0e6585;

  /* ---------- NEUTRAL · Silver Mist (cool background system) ---------- */
  --color-cream-50:  #fafcfe;     /* lightest: page background */
  --color-cream-100: #f3f7fa;     /* page background */
  --color-cream-200: #e8eff5;     /* soft tint */
  --color-cream-300: #d8e3ec;     /* section bg */
  --color-stone-300: #c5d2de;     /* borders */
  --color-stone-500: #6a7a8a;     /* secondary text */
  --color-ink-700:   #1e2a3a;     /* body text */
  --color-ink-900:   #0e1726;     /* heading text */
  --color-white:     #ffffff;

  /* ---------- GLASS SYSTEM (premium translucent surfaces) ---------- */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-soft:   rgba(255, 255, 255, 0.45);
  --glass-border:    rgba(255, 255, 255, 0.7);
  --glass-border-dk: rgba(197, 210, 222, 0.55);
  --glass-shadow:    0 8px 32px rgba(14, 23, 38, 0.08);
  --glass-glow:      0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 1px 0 rgba(255, 255, 255, 0.8) inset;

  /* ---------- SEMANTIC ---------- */
  --color-success: #2e7d4f;
  --color-warning: #b9761a;
  --color-error:   #c0392b;
  --color-info:    #1e9bc4;

  /* ---------- TYPOGRAPHY ---------- */
  /* Unified to Inter per design request (match hero-subtitle style); sizes/weights/colors unchanged */
  --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* tracking presets used in the reference (medical-clinical feel) */
  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.14em;
  --tracking-link:    0.06em;

  /* ---------- SPACING SCALE (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADIUS ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  20px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ---------- SHADOWS (cool, low-spread) ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 23, 38, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 23, 38, 0.06), 0 1px 2px rgba(14, 23, 38, 0.04);
  --shadow-md: 0 6px 20px rgba(14, 23, 38, 0.07), 0 2px 6px rgba(14, 23, 38, 0.05);
  --shadow-lg: 0 18px 40px rgba(14, 23, 38, 0.10), 0 4px 12px rgba(14, 23, 38, 0.06);
  --shadow-xl: 0 32px 64px rgba(14, 23, 38, 0.14), 0 8px 24px rgba(14, 23, 38, 0.08);
  --shadow-glow: 0 0 0 1px rgba(30, 155, 196, 0.2), 0 8px 24px rgba(30, 155, 196, 0.15);

  /* ---------- MOTION ---------- */
  --transition-fast:   150ms cubic-bezier(.2,.8,.2,1);
  --transition-normal: 280ms cubic-bezier(.2,.8,.2,1);
  --transition-slow:   480ms cubic-bezier(.16,.84,.3,1);

  /* ---------- LEGACY ALIASES (keep style.css / intro.css / admin / auth working) ---------- */
  --color-primary:        var(--color-primary-500);
  --color-primary-light:  var(--color-primary-300);
  --color-primary-dark:   var(--color-primary-700);
  --color-accent:         var(--color-accent-500);
  --color-accent-light:   var(--color-accent-200);
  --color-accent-dark:    var(--color-accent-700);
  --color-cream:          var(--color-cream-100);
  --color-cream-dark:     var(--color-cream-200);
  --color-text:           var(--color-ink-700);
  --color-text-light:     var(--color-stone-500);
  --color-text-muted:     #97a3b3;
  --color-border:         var(--color-stone-300);

  --forest:        var(--color-primary-500);
  --gold:          var(--color-accent-500);
  --cream-light:   var(--color-cream-100);
  --cream-dark:    var(--color-cream-200);
  --text-primary:  var(--color-ink-700);
  --text-secondary: var(--color-stone-500);
  --text-light:    var(--color-text-muted);
  --font-heading:  var(--font-serif);
  --font-body:     var(--font-sans);
  --color-bg:      var(--color-cream-100);
  --brand:         var(--color-primary-500);
}

/* ============================================================
   DARK THEME (cool-tinted, navy)
   ============================================================ */
[data-theme="dark"] {
  --color-cream-50:  #0b1019;
  --color-cream-100: #0e1726;
  --color-cream-200: #141f33;
  --color-cream-300: #1d2b42;
  --color-stone-300: #2c3a52;
  --color-stone-500: #9aa8b8;
  --color-ink-700:   #e6edf6;
  --color-ink-900:   #f5f9fd;
  --color-white:     #11192a;

  --color-primary-50:  #131c2c;
  --color-primary-100: #1c2942;
  --color-primary-200: #243a5c;
  --color-primary-300: #34507a;
  --color-primary-500: #f5f9fd;
  --color-primary-600: #c4d2e3;
  --color-primary-700: #97aac4;

  --color-accent-300: #6dd3eb;
  --color-accent-500: #4cc1dd;
  --color-accent-700: #8ed9ec;

  --color-success: #4caf6a;
  --color-warning: #d9923f;
  --color-error:   #e57373;
  --color-info:    #4cc1dd;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.55), 0 4px 12px rgb(0 0 0 / 0.3);

  --color-text:        var(--color-ink-700);
  --color-text-light:  var(--color-stone-500);
  --color-text-muted:  #6c7a8e;
  --color-border:      var(--color-stone-300);
  --color-cream:       var(--color-cream-100);
  --color-cream-dark:  var(--color-cream-200);

  --forest:        var(--color-primary-500);
  --gold:          var(--color-accent-500);
  --cream-light:   var(--color-cream-100);
  --cream-dark:    var(--color-cream-200);
  --text-primary:  var(--color-ink-700);
  --text-secondary: var(--color-stone-500);
  --text-light:    var(--color-text-muted);
  --color-bg:      var(--color-cream-100);
  --brand:        var(--color-accent-500);
}