/* ============================================================
   Planet Pulse — brand color tokens
   Derived from the logo: purple cosmos + neon cyan pulse
   ============================================================ */

:root {
  /* --- Brand purple ramp (logo planet + background) --- */
  --purple-50:  #F4EEFD;
  --purple-100: #E6D9FA;
  --purple-200: #D0B8F4;
  --purple-300: #B394E9;
  --purple-400: #9670DB;
  --purple-500: #7B4BCC;
  --purple-600: #6733BE;   /* primary brand */
  --purple-700: #53279E;
  --purple-800: #401C7E;
  --purple-900: #2C1259;
  --purple-950: #1D0A3E;

  /* --- Pulse cyan ramp (logo ring) --- */
  --cyan-50:  #EFFBFE;
  --cyan-100: #D8F5FD;
  --cyan-200: #AEEDFD;   /* ring core in the logo */
  --cyan-300: #7FDEF8;
  --cyan-400: #4FC9F0;   /* signature accent */
  --cyan-500: #2BAFDC;
  --cyan-600: #1793BD;   /* min shade for cyan text on white (AA) */
  --cyan-700: #12759A;
  --cyan-800: #0F5B78;
  --cyan-900: #0A3F54;

  /* --- Violet-tinted neutrals --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F4FD;
  --neutral-100: #EEEAF8;
  --neutral-200: #DDD6EE;
  --neutral-300: #BFB6DC;
  --neutral-400: #9C93BE;
  --neutral-500: #7A7199;
  --neutral-600: #5C5378;
  --neutral-700: #443C5C;
  --neutral-800: #302946;
  --neutral-900: #221B3C;
  --neutral-950: #161028;

  /* --- Special: moon cream (rare warm highlight, pro badges) --- */
  --moon-100: #FBF3DE;
  --moon-300: #F5E3B8;   /* logo moon */
  --moon-700: #8A6A1E;   /* moon-colored text on light bg */

  /* --- Semantic --- */
  --success:     #2FBF8F;
  --success-bg:  #E3F8F0;
  --success-text:#0B4A38;
  --warning:     #F0B350;
  --warning-bg:  #FDF2DC;
  --warning-text:#5C3D08;
  --error:       #F0617A;
  --error-bg:    #FDE7EB;
  --error-text:  #5C1220;
  --info:        var(--cyan-400);
  --info-bg:     var(--cyan-100);
  --info-text:   var(--cyan-800);
}

/* ============================================================
   Light theme (default)
   ============================================================ */
:root {
  --bg-canvas:      var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-subtle:      var(--neutral-100);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-400);
  --text-inverse:   var(--neutral-0);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);

  --brand:          var(--purple-600);
  --brand-hover:    var(--purple-700);
  --brand-subtle:   var(--purple-100);
  --on-brand:       var(--neutral-0);

  --accent:         var(--cyan-600);   /* links, accent text on light */
  --accent-fill:    var(--cyan-400);   /* buttons, active states */
  --accent-hover:   var(--cyan-500);
  --accent-subtle:  var(--cyan-100);
  --on-accent:      var(--cyan-900);

  --focus-ring:     var(--cyan-400);
}

/* ============================================================
   Dark theme (the logo's native habitat)
   ============================================================ */
[data-theme="dark"] {
  --bg-canvas:      var(--purple-950);
  --bg-surface:     var(--purple-900);
  --bg-subtle:      var(--purple-800);

  --text-primary:   #F1EBFB;
  --text-secondary: var(--purple-200);
  --text-muted:     var(--purple-300);
  --text-inverse:   var(--neutral-900);

  --border:         #3E2F66;
  --border-strong:  #55428A;

  --brand:          var(--purple-400);
  --brand-hover:    var(--purple-300);
  --brand-subtle:   var(--purple-800);
  --on-brand:       var(--purple-950);

  --accent:         var(--cyan-400);
  --accent-fill:    var(--cyan-400);
  --accent-hover:   var(--cyan-300);
  --accent-subtle:  #123A52;
  --on-accent:      var(--purple-950);

  --focus-ring:     var(--cyan-300);

  --success-bg:  #0E3D30;  --success-text: #7FE8C6;
  --warning-bg:  #4A3410;  --warning-text: #F8CE85;
  --error-bg:    #4A1622;  --error-text:   #F8A3B2;
  --info-bg:     #0F3A50;  --info-text:    var(--cyan-200);
}