/* ============================================================
   Superhairpieces — Colour tokens
   Naming model (from the SHP Figma): element.tone.emphasis.state
   Light mode is the source of truth.
   ============================================================ */

:root {
  /* ---------- Primitive: Neutral (grey-slate) ----------
     The SHP brand neutral. Charcoal #2B2B2B is the PRIMARY brand
     colour in the current rebrand (brand → grey-slate). */
  --shp-white:        #ffffff;
  --shp-black:        #000000;
  --neutral-0:        #fcfcfc; /* base surface */
  --neutral-25:       #f7f7f7;
  --neutral-50:       #f2f2f2; /* sunken */
  --neutral-100:      #e5e5e5; /* hairline border */
  --neutral-200:      #cccccc;
  --neutral-300:      #b3b3b3; /* strong border */
  --neutral-400:      #999999;
  --neutral-500:      #8a8a8a; /* press fill */
  --neutral-600:      #6d6d6d;
  --neutral-700:      #585757; /* secondary text, hover fill */
  --neutral-800:      #3c3c3c;
  --neutral-900:      #343434;
  --neutral-1000:     #2b2b2b; /* primary text + primary fill (brand) */

  /* ---------- Primitive: Red (error) — 50 → 1000, 1000 darkest.
     Usage anchor: 500 = the error "strong" colour. */
  --red-50:    #fcf1f1;
  --red-100:   #f8dbdb;
  --red-200:   #f0b4b4;
  --red-300:   #e68c8c;
  --red-400:   #da6363;
  --red-500:   #c73a3a; /* strong (fills, text) */
  --red-600:   #ae3232;
  --red-700:   #8f2929;
  --red-800:   #6f2020;
  --red-900:   #501717;
  --red-1000:  #361010;

  /* ---------- Primitive: Green (success). Anchor: 600 = strong. */
  --green-50:   #ecfbf5;
  --green-100:  #cff4e6;
  --green-200:  #9fe8cc;
  --green-300:  #5fd6ab;
  --green-400:  #1fb985;
  --green-500:  #0a9268;
  --green-600:  #067a57; /* strong (fills, text) */
  --green-700:  #066047;
  --green-800:  #064b38;
  --green-900:  #053829;
  --green-1000: #04261c;

  /* ---------- Primitive: Amber (warning).
     Anchor: 400 = fill, 700 = text-on-light. */
  --amber-50:   #fff9ec;
  --amber-100:  #fdefc9;
  --amber-200:  #fbdd8e;
  --amber-300:  #facb53;
  --amber-400:  #ffc02e; /* warning fill */
  --amber-500:  #e0a41c;
  --amber-600:  #b98316;
  --amber-700:  #8f6c1a; /* warning text on light */
  --amber-800:  #6e5314;
  --amber-900:  #4f3c0f;
  --amber-1000: #34270a;

  /* ---------- Primitive: Teal (information).
     Anchor: 400 = bright, 600 = strong. */
  --teal-50:   #eff8fe;
  --teal-100:  #d2ecfb;
  --teal-200:  #a6d8f5;
  --teal-300:  #6fc0ee;
  --teal-400:  #26b0ff; /* bright */
  --teal-500:  #1e91d8;
  --teal-600:  #1a74a8; /* strong (fills, text) */
  --teal-700:  #155c85;
  --teal-800:  #114863;
  --teal-900:  #0c3447;
  --teal-1000: #08222e;

  /* NOTE: Superhairpieces has NO decorative accent colour. The brand is
     monochrome — black, white and the grey-slate ramp. The semantic colours
     above (red/green/amber/teal) are reserved for FUNCTIONAL system states
     only (errors, success, warnings, info) — never for decoration or emphasis.
     Emphasis is achieved with weight, charcoal fills and whitespace. */

  --amber-fill: var(--amber-400);

  /* ---------- Deprecated brand (legacy blue/navy) ----------
     Kept for reference only. Do not use for new work. */
  --legacy-blue:      #4c64d9;
  --legacy-navy:      #0d0d80;

  /* ============================================================
     SEMANTIC TOKENS (light mode)
     ============================================================ */

  /* Background / surface */
  --background-base:     var(--neutral-0);
  --background-sunken:   var(--neutral-50);
  --background-raised:   var(--shp-white);
  --background-overlay:  var(--shp-white);
  --background-inverse:  var(--neutral-1000);
  --surface-card:        var(--shp-white);
  --fill-image:          var(--neutral-50);

  /* Text */
  --text-strong:    var(--neutral-1000);
  --text-weak:      var(--neutral-700);
  --text-disabled:  var(--neutral-300);
  --text-inverse-strong: var(--shp-white);
  --text-inverse-weak:   rgba(255, 255, 255, 0.72);
  --text-link:      var(--neutral-1000);
  --text-error:     var(--red-500);
  --text-success:   var(--green-600);
  --text-warning:   var(--amber-700);
  --text-info:      var(--teal-600);

  /* Fill — neutral / brand (primary actions are charcoal) */
  --fill-strong:    var(--neutral-1000);
  --fill-hover:     var(--neutral-700);
  --fill-press:     var(--neutral-500);
  --fill-disabled:  var(--neutral-100);
  --fill-brand-strong: var(--neutral-1000);
  --fill-brand-weak:   var(--neutral-50);

  /* Fill — semantic */
  --fill-error-strong:   var(--red-500);
  --fill-error-weak:     var(--red-50);
  --fill-success-strong: var(--green-600);
  --fill-success-weak:   var(--green-50);
  --fill-warning-strong: var(--amber-400);
  --fill-warning-weak:   var(--amber-50);
  --fill-info-strong:    var(--teal-600);
  --fill-info-weak:      var(--teal-50);
  /* "accent" kept as an alias for back-compat — resolves to brand ink, NOT a colour */
  --fill-accent:         var(--neutral-1000);
  --fill-accent-weak:    var(--neutral-50);

  /* Stroke / border */
  --stroke-weak:    var(--neutral-100);
  --stroke-strong:  var(--neutral-300);
  --stroke-focus:   var(--neutral-1000);
  --stroke-error:   var(--red-200);
  --stroke-success: var(--green-200);
  --stroke-warning: var(--amber-200);
  --stroke-info:    var(--teal-200);

  /* Icon */
  --icon-strong:   var(--neutral-1000);
  --icon-weak:     var(--neutral-700);
  --icon-disabled: var(--neutral-300);
  --icon-inverse:  var(--shp-white);

  /* Star rating — monochrome: filled ink, empty light grey */
  --rating-filled: var(--neutral-1000);
  --rating-empty:  var(--neutral-200);
}