/* ============================================================
   Vinner Labs — Color Tokens
   Palette derived from the Vinner butterfly: a magenta→violet
   gradient over a neutral gray wordmark. Each product line
   carries its own signature hue, harmonized to the brand.
   ============================================================ */

:root {
  /* ---- Brand: the butterfly gradient ---- */
  --vin-magenta:      #DE0591;  /* sampled from butterfly wing top */
  --vin-orchid:       #B0179A;  /* mid wing */
  --vin-violet:       #80278F;  /* lower wing / dot */
  --vin-violet-deep:  #5E2074;

  /* Magenta tint ramp (surfaces, hovers, washes) */
  --magenta-50:   #FDF0F8;
  --magenta-100:  #FBDCEF;
  --magenta-200:  #F6B6DD;
  --magenta-300:  #EE83C3;
  --magenta-400:  #E748AB;
  --magenta-500:  #DE0591;  /* = --vin-magenta */
  --magenta-600:  #C00B86;
  --magenta-700:  #9C1577;
  --magenta-800:  #7C1C68;
  --magenta-900:  #5E1B53;

  /* Violet tint ramp */
  --violet-50:    #F7F0FA;
  --violet-100:   #ECDCF3;
  --violet-200:   #D8B9E6;
  --violet-300:   #BD8DD3;
  --violet-400:   #9F5DBC;
  --violet-500:   #80278F;  /* = --vin-violet */
  --violet-600:   #6E2080;
  --violet-700:   #5A1C6B;
  --violet-800:   #471955;
  --violet-900:   #361541;

  /* Signature brand gradient (logo butterfly) */
  --vin-gradient:        linear-gradient(118deg, #DE0591 0%, #AF1A95 52%, #80278F 100%); /* @kind color */
  --vin-gradient-soft:   linear-gradient(118deg, #FDF0F8 0%, #F7F0FA 100%); /* @kind color */
  --vin-gradient-vivid:  linear-gradient(118deg, #FF0E9D 0%, #B81C9C 50%, #7A2A98 100%); /* @kind color */

  /* ---- Neutrals (true gray, matches the #595959 wordmark) ---- */
  --white:     #FFFFFF;
  --gray-50:   #F8F8F9;
  --gray-100:  #F1F1F2;
  --gray-200:  #E4E4E6;
  --gray-300:  #CECED1;
  --gray-400:  #A9A9AD;
  --gray-500:  #8A8A8E;
  --gray-600:  #6E6E72;
  --gray-700:  #595959;  /* the Vinner wordmark gray */
  --gray-800:  #3C3C3F;
  --gray-900:  #262629;
  --gray-950:  #18181A;

  /* ---- Product line signature colors ---- */
  --line-sunbest:        #F2A93B;  /* UV filters — sun gold */
  --line-sunbest-soft:   #FDF3E1;
  --line-vinpep:         #149B96;  /* peptides — clinical teal */
  --line-vinpep-soft:    #E1F4F3;
  --line-vintan:         #C57A3C;  /* self-tan — warm bronze */
  --line-vintan-soft:    #F8EDE1;
  --line-vinarom:        #B0506F;  /* fragrance — plum rose */
  --line-vinarom-soft:   #F8EBEF;
  --line-vinshield:      #4E9C5B;  /* preservatives — fresh green */
  --line-vinshield-soft: #E6F3E8;
  /* VINCOL colour lines — category accent = #E11D62 (from the Vinner ERP
     products page). This is only the fallback: individual dye/hair-dye
     products wear their OWN shade colour (see components/product/dyeColors.js),
     an exact match to their CI Number / hair-dye colour. */
  --line-vincol-hair:    #E11D62;  /* hair dyes — VINCOL crimson */
  --line-vincol-hair-soft:#FCE4EC;
  --line-vincol-dyes:    #E11D62;  /* dyes & pigments — VINCOL crimson */
  --line-vincol-dyes-soft:#FCE4EC;

  /* Ink variants — the SAME hue darkened until it clears WCAG AA (4.5:1) on
     --bg. Use these whenever a line colour becomes TEXT; the identity tokens
     above stay for swatches, tags, rules and fills, where contrast is judged
     against what sits on top of them instead.

     Measured as text on --bg, the identity colours were:
       sunbest 1.88:1 · vintan 3.17 · vinshield 3.17 · vinpep 3.20 · vincol 4.33
       vinarom 4.67 on --bg but only 4.29 on its own soft tint

     Each ink is solved against the DARKEST ground its line appears on, which is
     the line's own -soft tint (those sit a little below --bg), not --bg itself.
     Solving against --bg alone left four of six between 4.11 and 4.49 on the
     soft pills. Every value below clears 4.5:1 on --bg, on its soft tint and on
     --surface-card.

     Sun gold is inherently light: any AA-legible form of #F2A93B is a bronze.
     That is a property of the hue, not a compromise in the darkening. */
  --line-sunbest-ink:      #906523;  /* 4.85 --bg · 4.70 soft */
  --line-vinpep-ink:       #107976;  /* 4.88 · 4.56 */
  --line-vinshield-ink:    #3B7745;  /* 5.07 · 4.71 */
  --line-vinarom-ink:      #A64B68;  /* 5.15 · 4.73 */
  --line-vintan-ink:       #965D2E;  /* 5.07 · 4.68 */
  --line-vincol-hair-ink:  #C71A57;  /* 5.31 · 4.70 */
  --line-vincol-dyes-ink:  #C71A57;  /* 5.31 · 4.70 */

  /* ---- Status ---- */
  --success:    #2E9E5B;
  --success-soft:#E6F4EC;
  --warning:    #E0A11A;
  --warning-soft:#FBF1DA;
  --danger:     #D64545;
  --danger-soft:#FBE9E9;
  --info:       #3B7DD8;
  --info-soft:  #E7F0FB;

  /* ============================================================
     Semantic aliases — use these in components
     ============================================================ */

  /* Backgrounds & surfaces */
  /* Warm off-white ground with a whisper of blush/lilac, so white cards and
     imagery lift off the page instead of dissolving into it. */
  --bg:            #FAF7F8;
  --bg-subtle:     var(--gray-50);
  --bg-muted:      var(--gray-100);
  --bg-inverse:    var(--gray-950);
  --surface-card:  var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--gray-50);

  /* Text */
  --text-strong:   #1F1F22;
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-600);
  /* --text-subtle was --gray-500 #8A8A8E, which is 3.23:1 on --bg and fails
     WCAG AA. On a ground this close to white there is no legible tier below
     --text-muted: the lightest grey that clears 4.5:1 is #727274, and that sits
     0.011 luminance from --gray-600, indistinguishable from --text-muted. So
     the colour tier collapses and the hierarchy is carried by size, weight and
     spacing instead. The .vin-on-dark override in base.css keeps its own value;
     white at 0.52 alpha over #170920 already measures 5.64:1. */
  --text-subtle:   var(--gray-600);
  --text-on-brand: var(--white);
  --text-link:     var(--magenta-600);

  /* Brand actions.
     --brand is a TEXT colour here: 405 usages are `color:`, none are
     backgrounds, because gradients and fills reference --vin-magenta directly.
     At #DE0591 it measured 4.35:1 on --bg, just under AA, so the whole chain
     steps one stop down the ramp. --vin-magenta itself is unchanged, so the
     butterfly gradient, CTAs and every filled surface keep the exact brand hue. */
  --brand:         var(--magenta-600);   /* 5.43:1 on --bg */
  --brand-hover:   var(--magenta-700);   /* 7.08:1 */
  --brand-active:  var(--magenta-800);   /* 8.87:1 */
  --brand-contrast:var(--white);
  --accent:        var(--vin-violet);

  /* Borders & lines */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-brand:  var(--magenta-200);
  --divider:       var(--gray-200);

  /* Focus ring */
  --ring:          color-mix(in srgb, var(--vin-magenta) 45%, transparent);
}