/* ============================================================
   WELLBEE DESIGN TOKENS
   ------------------------------------------------------------
   The single source of truth for colors, type, shape, shadow,
   and motion. Every other stylesheet reads from these variables.
   Change a value here and it updates across the whole site.
   ============================================================ */
:root {
  /* Brand cyan ramp */
  --wb-cyan-50:  #e9f8fc;
  --wb-cyan-100: #cdeef6;
  --wb-cyan-200: #9fdfee;
  --wb-cyan-300: #5fc8e0;
  --wb-cyan-400: #1fb0d2;
  --wb-primary:  #0096ba;
  --wb-cyan-600: #007e9b;
  --wb-cyan-700: #006c84;
  --wb-cyan-800: #00566a;
  --wb-link:     #00718a;

  /* Ink neutrals (teal-tinted) */
  --wb-ink-900: #0a262e;
  --wb-ink-800: #103743;
  --wb-ink-700: #1c4d5a;
  --wb-ink-600: #2f6573;
  --wb-ink-500: #43707d;
  --wb-ink-400: #6f9aa5;
  --wb-ink-300: #a9c2c9;
  --wb-ink-200: #cddde2;
  --wb-ink-100: #e6eef0;

  /* Surfaces */
  --wb-bg:            #f7fbfd;
  --wb-surface:       #ffffff;
  --wb-surface-tint:  #f2fafc;
  --wb-surface-muted: #eaf4f7;
  --wb-surface-deep:  #0b4759;
  --wb-border-soft:   #dcedf2;

  /* Texture system */
  --wb-texture-dots: radial-gradient(rgba(0,150,186,0.10) 1.5px, transparent 1.5px);
  --wb-texture-dots-sun: radial-gradient(rgba(233,180,40,0.16) 1.5px, transparent 1.5px);
  --wb-texture-size: 22px 22px;

  /* Trial CTA */
  --wb-sun-50:  #fdf8e9;
  --wb-sun-100: #fbefbd;
  --wb-sun-400: #f5c93b;
  --wb-sun-500: #e9b428;
  --wb-sun-ink: #3c2f05;

  /* Logo (from the official Wellbee logo lockup) */
  --wb-logo-blue:   #2e9bf7;
  --wb-logo-green:  #22a63c;
  --wb-logo-yellow: #e5c400;
  --wb-logo-orange: #f0521c;
  --wb-logo-pink:   #f7a4d4;

  /* Single-use rainbow accents */
  --wb-sky:    var(--wb-logo-blue);
  --wb-leaf:   var(--wb-logo-green);
  --wb-sun:    var(--wb-logo-yellow);
  --wb-coral:  var(--wb-logo-orange);
  --wb-pink:   var(--wb-logo-pink);
  --wb-indigo: #6f4ce6;

  /* Semantic */
  --wb-success: #19a93a;
  --wb-success-bg: #e4f6e8;
  --wb-success-ink: #0a7d2a;

  /* Growth spectrum: Seed → Master */
  --wb-level-1-seed:     #149a35;
  --wb-level-2-sprout:   #4aa823;
  --wb-level-3-leaf:     #0a9b96;
  --wb-level-4-tree:     #2487c9;
  --wb-level-5-explorer: #6f4ce6;
  --wb-level-6-leader:   #d23fb8;
  --wb-level-7-master:   #e86f0c;
  --wb-level-1-tint: #e8f7ec;
  --wb-level-2-tint: #edf7e6;
  --wb-level-3-tint: #e6f7f6;
  --wb-level-4-tint: #e8f2fb;
  --wb-level-5-tint: #f0edfd;
  --wb-level-6-tint: #fbe9f7;
  --wb-level-7-tint: #fff0e4;

  /* Type */
  --wb-font-display: "Baloo 2", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --wb-font-body: "Zen Maru Gothic", "Nunito", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;

  /* Shape */
  --wb-radius-sm: 8px;
  --wb-radius-md: 12px;
  --wb-radius-lg: 16px;
  --wb-radius-xl: 24px;
  --wb-radius-2xl: 32px;
  --wb-radius-pill: 9999px;
  --wb-radius-squish: 38%;
  --wb-blob-1: 56% 44% 52% 48% / 52% 46% 54% 48%;
  --wb-blob-2: 48% 52% 43% 57% / 54% 42% 58% 46%;
  --wb-blob-3: 58% 42% 48% 52% / 45% 56% 44% 55%;
  --wb-blob-4: 44% 56% 58% 42% / 55% 46% 54% 45%;

  /* Elevation (soft, ink-tinted) */
  --wb-shadow-xs: 0 1px 2px rgba(10,38,46,0.06);
  --wb-shadow-sm: 0 2px 8px rgba(10,38,46,0.08);
  --wb-shadow-md: 0 8px 24px rgba(10,38,46,0.10);
  --wb-shadow-lg: 0 16px 40px rgba(10,38,46,0.12);
  --wb-focus-ring: 0 0 0 4px rgba(0,150,186,0.30);

  /* Motion */
  --wb-dur-fast: 150ms;
  --wb-dur-base: 250ms;
  --wb-dur-slow: 450ms;
  --wb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --wb-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --wb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}