/* ============================================================
   Chiketto — Color tokens
   Brand DNA: magenta → purple. Premium & sleek.
   Two layers: (1) raw palette scales, (2) semantic aliases.
   A dark theme scope is provided via [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Brand: Magenta (primary) ---- */
  --magenta-50:  #FDF0F8;
  --magenta-100: #FBDCEF;
  --magenta-200: #F7B8DF;
  --magenta-300: #F086C7;
  --magenta-400: #E54FA8;
  --magenta-500: #CF1A83; /* base — primary */
  --magenta-600: #B3146E;
  --magenta-700: #8F1058;
  --magenta-800: #6B0C42;
  --magenta-900: #4A0A2E;

  /* ---- Brand: Pink (secondary / gradient partner) ---- */
  --pink-300: #F77BBE;
  --pink-400: #EC3F9C;
  --pink-500: #DE1081; /* base — secondary */
  --pink-600: #C00A6D;

  /* ---- Brand: Purple (accent) ---- */
  --purple-50:  #F8EEFD;
  --purple-100: #EFD6FB;
  --purple-200: #DEAEF6;
  --purple-300: #C77BEF;
  --purple-400: #B23FE6;
  --purple-500: #9E07D8; /* base — accent */
  --purple-600: #8505B6;
  --purple-700: #6A0892;
  --purple-800: #4F0A6E;
  --purple-900: #36084A;

  /* ---- Violet bridge (deep brand purple from logo option) ---- */
  --violet-500: #7F368C;
  --violet-700: #5C2168;

  /* ---- Neutrals (purple-tinted ink → premium) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8FC;
  --neutral-100: #F3EFF7;
  --neutral-200: #E7E1EE;
  --neutral-300: #D2C9DC;
  --neutral-400: #A99CB7;
  --neutral-500: #7E7290;
  --neutral-600: #5C5170;
  --neutral-700: #423A54;
  --neutral-800: #2A2438;
  --neutral-900: #1A1525;
  --neutral-950: #0F0B17;

  /* ---- Semantic palettes ---- */
  --success-100: #D6F5E6;
  --success-500: #15B488;
  --success-700: #0C7A5C;
  --warning-100: #FCEFD2;
  --warning-500: #F5A623;
  --warning-700: #B5740A;
  --danger-100:  #FBDEE2;
  --danger-500:  #EF2D56;
  --danger-700:  #B01038;
  --info-100:    #DBE7FE;
  --info-500:    #4A6CF7;
  --info-700:    #2742B5;

  /* ---- Signature gradients ---- */
  --gradient-brand: linear-gradient(120deg, #DE1081 0%, #CF1A83 42%, #9E07D8 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(120deg, #FBDCEF 0%, #EFD6FB 100%); /* @kind color */
  --gradient-ink: linear-gradient(155deg, #1A1525 0%, #2A2438 60%, #4A0A2E 140%); /* @kind color */
  --gradient-glow: radial-gradient(120% 120% at 100% 0%, rgba(222,16,129,0.55) 0%, rgba(158,7,216,0.0) 55%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES  (light theme — default)
     ============================================================ */

  /* Brand */
  --brand:            var(--magenta-500);
  --brand-hover:      var(--magenta-600);
  --brand-press:      var(--magenta-700);
  --brand-soft:       var(--magenta-50);
  --brand-soft-border:var(--magenta-200);
  --accent:           var(--purple-500);
  --accent-hover:     var(--purple-600);
  --accent-soft:      var(--purple-50);

  /* Surfaces */
  --bg-page:          var(--neutral-50);
  --bg-subtle:        var(--neutral-100);
  --surface-card:     var(--neutral-0);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-inverse:  var(--neutral-900);
  --surface-overlay:  rgba(15, 11, 23, 0.55);

  /* Text */
  --text-strong:      var(--neutral-900);
  --text-body:        var(--neutral-700);
  --text-muted:       var(--neutral-500);
  --text-faint:       var(--neutral-400);
  --text-on-brand:    var(--neutral-0);
  --text-on-inverse:  var(--neutral-50);
  --text-brand:       var(--magenta-600);
  --text-link:        var(--magenta-600);

  /* Borders */
  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-400);
  --border-brand:     var(--magenta-500);

  /* States */
  --focus-ring:       color-mix(in srgb, var(--magenta-500) 45%, transparent);
  --selection-bg:     var(--magenta-100);

  /* Semantic intent (text/bg pairs resolved per use) */
  --success:          var(--success-500);
  --warning:          var(--warning-500);
  --danger:           var(--danger-500);
  --info:             var(--info-500);
}

/* ============================================================
   DARK THEME  — used by the wallet app & premium surfaces
   ============================================================ */
[data-theme="dark"] {
  --bg-page:          var(--neutral-950);
  --bg-subtle:        var(--neutral-900);
  --surface-card:     var(--neutral-900);
  --surface-raised:   var(--neutral-800);
  --surface-sunken:   #0A0710;
  --surface-inverse:  var(--neutral-50);
  --surface-overlay:  rgba(5, 3, 9, 0.7);

  --text-strong:      var(--neutral-50);
  --text-body:        var(--neutral-300);
  --text-muted:       var(--neutral-400);
  --text-faint:       var(--neutral-500);
  --text-on-inverse:  var(--neutral-900);
  --text-brand:       var(--magenta-300);
  --text-link:        var(--magenta-300);

  --brand-soft:       color-mix(in srgb, var(--magenta-500) 18%, transparent);
  --brand-soft-border:color-mix(in srgb, var(--magenta-500) 40%, transparent);
  --accent-soft:      color-mix(in srgb, var(--purple-500) 18%, transparent);

  --border-subtle:    color-mix(in srgb, var(--neutral-0) 8%, transparent);
  --border-default:   color-mix(in srgb, var(--neutral-0) 14%, transparent);
  --border-strong:    color-mix(in srgb, var(--neutral-0) 24%, transparent);

  --selection-bg:     color-mix(in srgb, var(--magenta-500) 35%, transparent);
}

::selection { background: var(--selection-bg); }