/* ============================================================
   Truekr — Color tokens
   Marketplace de trueques entre creadores y experiencias.
   Palette: deep oceanic teals + warm coral accent + sands.
   ============================================================ */

:root {
  /* ---- Primary (oceanic) — official palette ---- */
  --tk-midnight: #00252B; /* deepest, hero & dark surfaces */
  --tk-ocean:    #00333A; /* primary dark brand */
  --tk-teal:     #28656A; /* mid teal */
  --tk-sage:     #73A59B; /* muted green, supporting */

  /* ---- Accent (official coral) ---- */
  --tk-coral:        #E25835; /* the one true accent — CTAs, highlights */
  --tk-coral-hover:  #EC6E4D; /* lighter, hover */
  --tk-coral-active: #BF421F; /* darker, pressed */
  --tk-coral-soft:   #FBE6DE; /* tinted background wash */

  /* ---- Neutrals ---- */
  --tk-sand:       #F6F5F1; /* official sand — app background */
  --tk-light-gray: #E8EBE7; /* hairlines, soft fills */
  --tk-gray:       #BEC2C4; /* disabled, dividers */
  --tk-dark-gray:  #515A5E; /* secondary text */
  --tk-charcoal:   #2A2F33; /* near-black text on light */
  --tk-white:      #FFFFFF;

  /* ---- Gradients ---- */
  --tk-gradient-ocean:  linear-gradient(135deg, #00333A 0%, #00252B 100%); /* @kind color */
  --tk-gradient-sunset: linear-gradient(90deg, #E25835 0%, #F3A083 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — prefer these in product code
     ============================================================ */

  /* Surfaces */
  --surface-app:      var(--tk-sand);
  --surface-card:     var(--tk-white);
  --surface-card-alt: var(--tk-sand);     /* cream cards (creador/testimonio) */
  --surface-dark:     var(--tk-ocean);    /* dark cards / hero */
  --surface-darkest:  var(--tk-midnight);
  --surface-muted:    var(--tk-light-gray);

  /* Text */
  --text-primary:    var(--tk-charcoal);
  --text-secondary:  var(--tk-dark-gray);
  --text-muted:      var(--tk-gray);
  --text-on-dark:    var(--tk-white);
  --text-on-dark-dim:#A9B6B8;
  --text-accent:     var(--tk-coral);
  --text-link:       var(--tk-teal);

  /* Borders / lines */
  --border-subtle:  var(--tk-light-gray);
  --border-default: #D5DAD7;
  --border-strong:  var(--tk-dark-gray);
  --border-focus:   var(--tk-teal);
  --border-error:   var(--tk-coral);

  /* Brand / interactive */
  --brand:          var(--tk-ocean);
  --brand-deep:     var(--tk-midnight);
  --accent:         var(--tk-coral);
  --accent-hover:   var(--tk-coral-hover);
  --accent-active:  var(--tk-coral-active);

  /* Status */
  --status-success: var(--tk-sage);
  --status-rating:  #F5A623;   /* gold stars */
  --status-error:   var(--tk-coral);
}