/* ============================================================
   MEKORA — Color tokens  (industrial redesign)
   A single flat VIOLET signal accent on a cool steel/graphite
   neutral base. No gradients-as-decoration, no neon.
   Headings are graphite ink; violet is reserved for signal:
   key actions, active states, accent words, data highlights.
   Red appears ONLY in product photography — never as a brand color.
   ============================================================ */
:root {
  /* --- Brand violet — the lone signal accent (brand hue preserved) --- */
  --violet-50:  #F2ECFB;
  --violet-100: #E4D6F7;
  --violet-200: #C9AEEF;
  --violet-300: #A97FE6;
  --violet-400: #8B3FE8;
  --violet-500: #6E22D6;
  --violet-600: #5B16C4;  /* PRIMARY brand violet (wordmark) */
  --violet-700: #4A11A3;
  --violet-800: #360C79;
  --violet-900: #22084C;
  --violet-950: #12063A;

  /* --- Steel / graphite neutrals (cool, engineering-grade) --- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F3F5F7;  /* default light page bg — cool steel white */
  --neutral-100: #E8EBEE;
  --neutral-200: #D6DBE0;  /* engineering hairline */
  --neutral-300: #B7BFC7;
  --neutral-400: #8A939D;
  --neutral-500: #616A74;
  --neutral-600: #454D56;
  --neutral-700: #2F353D;
  --neutral-800: #1E232A;
  --neutral-900: #12161B;  /* graphite ink — headings */
  --neutral-950: #0B0E12;  /* graphite near-black — dark surfaces */

  /* --- Semantic status (muted, UI-only) --- */
  --success: #2C8A63;
  --success-bg: #E4F1EB;
  --warning: #B5771A;
  --warning-bg: #F6EEDD;
  --danger:  #C23B34;
  --danger-bg: #F6E4E3;
  --info: var(--violet-600);

  /* ============================================================
     Semantic aliases — LIGHT theme (default)
     ============================================================ */
  --brand:            var(--violet-600);
  --brand-strong:     var(--violet-700);
  --brand-bright:     var(--violet-500);
  --brand-contrast:   var(--neutral-0);

  --bg-page:          var(--neutral-50);
  --bg-page-alt:      var(--neutral-25);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-brand:    var(--violet-600);
  --surface-brand-soft: var(--violet-50);

  --text-strong:      var(--neutral-900);  /* graphite ink headings */
  --text-body:        var(--neutral-700);
  --text-muted:       var(--neutral-500);
  --text-on-brand:    var(--neutral-0);
  --text-accent:      var(--violet-600);

  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-400);
  --border-brand:     var(--violet-600);
  --hairline:         var(--neutral-200);  /* engineering-drawing hairline */

  --link:             var(--violet-600);
  --link-hover:       var(--violet-800);

  /* Brand "gradient" tokens — FLAT by strategy. Names retained for compatibility
     but mapped to the flat violet signal (CTAs & accents are committed flat blocks,
     no decorative gradient). The one permitted true gradient is --sheen-graphite. */
  --gradient-brand:        var(--violet-600); /* @kind color */
  --gradient-brand-bright: var(--violet-500); /* @kind color */
  --gradient-dark:         var(--neutral-950); /* @kind color */
  /* The only permitted true gradient: a subtle machined-graphite sheen. */
  --sheen-graphite:  linear-gradient(180deg, #1E232A 0%, #12161B 100%); /* @kind color */
}

/* ============================================================
   DARK theme — matte graphite. No neon, no glow.
   Apply on any element: <div data-theme="dark"> or .theme-dark
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg-page:          var(--neutral-950);
  --bg-page-alt:      var(--neutral-900);
  --surface-card:     #161A20;   /* matte raised plate */
  --surface-sunken:   #0F1318;
  --surface-brand-soft: rgba(139,63,232,0.14);

  --text-strong:      var(--neutral-0);
  --text-body:        var(--neutral-300);
  --text-muted:       var(--neutral-400);
  --text-accent:      var(--violet-300);

  --border-subtle:    rgba(255,255,255,0.09);
  --border-default:   rgba(255,255,255,0.14);
  --border-strong:    rgba(255,255,255,0.22);
  --border-brand:     var(--violet-400);
  --hairline:         rgba(255,255,255,0.10);

  --link:             var(--violet-300);
  --link-hover:       var(--violet-200);

  /* Flat by strategy (dark theme uses the brighter violet for signal contrast). */
  --gradient-brand:        var(--violet-500); /* @kind color */
  --gradient-brand-bright: var(--violet-400); /* @kind color */
  --gradient-dark:         var(--neutral-950); /* @kind color */
}