/* Within Yoga Wellness — Color tokens
   ------------------------------------------------------------------
   The palette is organised around four "color intentions" from the
   brand guide — FUN, ACTION, CONNECTION, MASTERY — each a saturated
   hue paired with a soft tint, anchored by a warm stone neutral.
*/
:root {
  /* —— Brand raw palette (exact hex from the brand guide) —— */
  --wy-stone:        #5b5150; /* warm taupe — ink / neutral anchor */
  --wy-blue:         #435dc2; /* ACTION      — deep periwinkle blue */
  --wy-sky:          #b3ecf8; /* ACTION tint — pale sky            */
  --wy-teal:         #6cbeb8; /* CONNECTION  — soft teal           */
  --wy-deep-teal:    #3a88a3; /* CONNECTION  — deep lagoon         */
  --wy-green:        #6aa752; /* MASTERY     — leaf green          */
  --wy-sage:         #a3dba8; /* MASTERY tint— light sage          */
  --wy-gold:         #eed13b; /* FUN         — warm gold           */

  /* —— Intention aliases —— */
  --intent-fun:        var(--wy-gold);
  --intent-action:     var(--wy-blue);
  --intent-action-soft:var(--wy-sky);
  --intent-connection: var(--wy-teal);
  --intent-connection-deep: var(--wy-deep-teal);
  --intent-mastery:    var(--wy-green);
  --intent-mastery-soft:var(--wy-sage);

  /* —— Primary brand color (teal carries the dandelion mark) —— */
  --brand:           var(--wy-teal);
  --brand-deep:      var(--wy-deep-teal);
  --brand-green:     var(--wy-green);

  /* —— Neutral / stone scale (warm-tinted greys) —— */
  --stone-900: #2c2625;
  --stone-800: #3d3534;
  --stone-700: #5b5150; /* = --wy-stone */
  --stone-600: #756b69;
  --stone-500: #938987;
  --stone-400: #b3aaa8;
  --stone-300: #d4cdcb;
  --stone-200: #e8e3e1;
  --stone-100: #f4f1ef;
  --stone-50:  #faf8f6; /* warm paper */
  --white:     #ffffff;

  /* —— Semantic surfaces —— */
  --surface-page:    var(--stone-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--stone-100);
  --surface-inverse: var(--stone-900);
  --surface-brand-soft: #e4f4f2; /* teal wash */
  --surface-sage-soft:  #ecf6ed; /* green wash */

  /* —— Semantic text —— */
  --text-strong:  var(--stone-900);
  --text-body:    var(--stone-700);
  --text-muted:   var(--stone-500);
  --text-on-brand:var(--white);
  --text-on-dark: var(--stone-50);
  --text-link:    var(--wy-deep-teal);

  /* —— Borders & lines —— */
  --border-subtle: var(--stone-200);
  --border-default:var(--stone-300);
  --border-strong: var(--stone-400);

  /* —— Semantic status (drawn from the intention palette) —— */
  --status-success: var(--wy-green);
  --status-info:    var(--wy-deep-teal);
  --status-warning: var(--wy-gold);
  --status-danger:  #c2544f; /* warm clay — derived, not in core 8 */

  /* —— Focus ring —— */
  --focus-ring: color-mix(in srgb, var(--wy-deep-teal) 55%, transparent);

  /* —— Signature brand gradient ——
     The studio's hero treatment: warm gold → teal → periwinkle blue,
     diagonally, as seen behind the white logo on withinyogawellness.com. */
  --gradient-brand: linear-gradient(150deg, #e8c84a 0%, #6cbeb8 46%, #4a63c8 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(150deg, #f0dd86 0%, #9bd6cf 50%, #8f9fe0 100%); /* @kind color */
}