/* ============================================================
   Livoo — Color tokens
   Brand blue sampled from the logo gradient (#0889EB → #20A9F7).
   Charcoal ink from the LIVOO wordmark. Green = discount/savings.
   ============================================================ */

:root {
  /* ---- Brand blue (primary) ---- */
  --livoo-blue-50:  #EAF6FE;
  --livoo-blue-100: #D4EDFD;
  --livoo-blue-200: #A9DBFA;
  --livoo-blue-300: #7DCBF8;
  --livoo-blue-400: #45B4F5;
  --livoo-blue-500: #1BA1F2;  /* primary */
  --livoo-blue-600: #0E93EC;  /* hover / gradient mid */
  --livoo-blue-700: #0889EB;  /* gradient deep end, pressed */
  --livoo-blue-800: #0A6CB8;

  --livoo-gradient: linear-gradient(105deg, #0889EB 0%, #20A9F7 100%); /* @kind color */
  --livoo-gradient-soft: linear-gradient(180deg, #45B4F5 0%, #1BA1F2 100%); /* @kind color */

  /* ---- Ink / charcoal (text + dark buttons) ---- */
  --livoo-ink-900: #1A1A1C;  /* "Comprar ahora" black button */
  --livoo-ink-800: #2A2A2D;
  --livoo-ink-700: #3A3A3C;  /* wordmark + headings */
  --livoo-ink-600: #55565A;
  --livoo-ink-500: #6E6F74;  /* secondary text */
  --livoo-ink-400: #9A9BA1;  /* muted / category label / strikethrough */
  --livoo-ink-300: #C4C5CB;

  /* ---- Neutrals / surfaces ---- */
  --livoo-white:     #FFFFFF;
  --livoo-surface-1: #F5F6F8;  /* page background, image plates */
  --livoo-surface-2: #EDEEF1;  /* category circles, spec rows */
  --livoo-surface-3: #E2E4E8;
  --livoo-line:      #E4E6EA;  /* hairline borders */
  --livoo-line-strong: #D2D5DB;

  /* ---- Semantic accents ---- */
  --livoo-success:    #1FA34A;  /* discount %, savings */
  --livoo-success-bg: #E6F6EC;
  --livoo-star:       #FFC107;  /* rating star */
  --livoo-danger:     #E03131;
  --livoo-danger-bg:  #FCE9E9;
  --livoo-warning:    #F08C00;

  /* ---- Promo tile pastels (homepage merch tiles) ---- */
  --livoo-tile-pink:     #F8DEE2;
  --livoo-tile-blue:     #E5F0F8;
  --livoo-tile-lavender: #ECEAF6;
  --livoo-tile-mint:     #E4F3EC;

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  --color-bg:          var(--livoo-surface-1);
  --color-surface:     var(--livoo-white);
  --color-surface-sub: var(--livoo-surface-2);

  --text-primary:   var(--livoo-ink-700);
  --text-heading:   var(--livoo-ink-800);
  --text-secondary: var(--livoo-ink-500);
  --text-muted:     var(--livoo-ink-400);
  --text-on-brand:  var(--livoo-white);
  --text-on-dark:   var(--livoo-white);

  --brand:          var(--livoo-blue-500);
  --brand-hover:    var(--livoo-blue-600);
  --brand-pressed:  var(--livoo-blue-700);
  --brand-strong:   var(--livoo-blue-700);
  --brand-tint:     var(--livoo-blue-50);
  --brand-gradient: var(--livoo-gradient); /* @kind color */

  --ink-button:     var(--livoo-ink-900);

  --border:         var(--livoo-line);
  --border-strong:  var(--livoo-line-strong);
  --border-brand:   var(--livoo-blue-400);

  --price:          var(--livoo-ink-900);
  --price-old:      var(--livoo-ink-400);
  --discount:       var(--livoo-success);
  --rating-star:    var(--livoo-star);

  --focus-ring:     0 0 0 3px var(--livoo-blue-200);
}