/* ============================================================
   NEXHA HAIRTECH — COLOR TOKENS
   A disciplined, near-monochrome system. Black, white, and a
   precise neutral ramp. Color is structural, not decorative.
   ============================================================ */

:root {
  /* --- Base neutral spine (the only "brand colors") --- */
  --c-ink:        #050506; /* deepest canvas — full-bleed dark */
  --c-black:      #0A0A0B; /* primary black — text, marks, fills */
  --c-near-black: #101012;
  --c-graphite:   #18181B;
  --c-carbon:     #26262A;
  --c-steel:      #45454B;
  --c-slate:      #6E6E76;
  --c-silver:     #9A9AA1;
  --c-mist:       #C2C2C7;
  --c-fog:        #E2E2E5;
  --c-cloud:      #EEEEEF;
  --c-paper:      #F6F6F7;
  --c-white:      #FFFFFF;

  /* --- Metallic / chrome accent (premium emphasis only) --- */
  --c-chrome-1: #6E6E74;
  --c-chrome-2: #C7C7CC;
  --c-chrome-3: #8A8A90;
  --grad-chrome: linear-gradient(168deg, #D6D6DA 0%, #8C8C92 22%, #EDEDF0 46%, #5E5E64 68%, #B6B6BC 100%); /* @kind color */

  /* --- E3 System tonal coding (sub-brand classification) ---
     Grayscale encodes the axis: darkest = technological,
     mid = hybrid, light = human. Master mark stays black. */
  --c-tone-master: #0A0A0B; /* HAIRTECH */
  --c-tone-tech:   #1C1C20; /* TECNOLÓGICA — Intelligence, Tools */
  --c-tone-hybrid: #56565B; /* HÍBRIDA — Academy */
  --c-tone-human:  #9A9AA1; /* HUMANA — Consulting, Studio */

  /* --- Functional / data signals (dashboards only) ---
     Desaturated so they never break the monochrome calm. */
  --c-positive: #2F7D5B;
  --c-positive-soft: #E4F0EA;
  --c-negative: #B23A33;
  --c-negative-soft: #F6E5E3;
  --c-warning:  #B5872C;
  --c-warning-soft: #F4ECDB;
  --c-info:     #3C6491;
  --c-info-soft: #E5ECF3;

  /* ============================================================
     SEMANTIC ALIASES — LIGHT (default)
     ============================================================ */
  --bg-canvas:      var(--c-white);
  --bg-subtle:      var(--c-paper);
  --bg-muted:       var(--c-cloud);
  --bg-inverse:     var(--c-ink);

  --surface-card:   var(--c-white);
  --surface-raised: var(--c-white);
  --surface-sunken: var(--c-paper);

  --border-subtle:  var(--c-cloud);
  --border-default: var(--c-fog);
  --border-strong:  var(--c-mist);
  --border-contrast:var(--c-black);

  --text-primary:   var(--c-black);
  --text-secondary: var(--c-steel);
  --text-muted:     var(--c-slate);
  --text-faint:     var(--c-silver);
  --text-inverse:   var(--c-white);

  --accent:         var(--c-black);   /* primary action */
  --accent-hover:   var(--c-carbon);
  --on-accent:      var(--c-white);

  --focus-ring:     var(--c-black);
  --overlay-scrim:  rgba(5, 5, 6, 0.55);
}

/* ============================================================
   SEMANTIC ALIASES — DARK
   Apply via [data-theme="dark"] or .nx-dark on any container.
   ============================================================ */
[data-theme="dark"], .nx-dark {
  --bg-canvas:      var(--c-ink);
  --bg-subtle:      var(--c-near-black);
  --bg-muted:       var(--c-graphite);
  --bg-inverse:     var(--c-white);

  --surface-card:   #15151A;
  --surface-raised: #1C1C22;
  --surface-sunken: #0C0C0F;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.22);
  --border-contrast:var(--c-white);

  --text-primary:   var(--c-white);
  --text-secondary: var(--c-mist);
  --text-muted:     var(--c-silver);
  --text-faint:     var(--c-slate);
  --text-inverse:   var(--c-black);

  --accent:         var(--c-white);
  --accent-hover:   var(--c-fog);
  --on-accent:      var(--c-black);

  --focus-ring:     var(--c-white);
  --overlay-scrim:  rgba(0, 0, 0, 0.7);

  --c-tone-tech:   #C9C9CF;
  --c-tone-hybrid: #8E8E96;
  --c-tone-human:  #5E5E66;
  --c-tone-master: #FFFFFF;
}