/* Manage Inventory — Color tokens
 * "Aurora Vivid" — a violet-primary system with a signature grape→violet→pink gradient,
 * violet-tinted neutrals, and calm semantic status colors. Base ramps first, then semantic aliases.
 * A dark theme is provided under [data-theme="dark"]. */

:root {
  /* ---- Brand: Violet (primary) ---- */
  --violet-50:  #f6f3fe;
  --violet-100: #eee7fd;
  --violet-200: #ddccfb;
  --violet-300: #c4a6f6;
  --violet-400: #a678ef;
  --violet-500: #9333ea;
  --violet-600: #7c3aed;  /* primary */
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;

  /* ---- Brand accent: Fuchsia / Pink (aurora tail, highlights) ---- */
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --pink-500:    #ec4899;
  --pink-600:    #db2777;

  /* ---- Neutrals: "Ink" (violet-tinted slate) ---- */
  --ink-50:  #f7f6fb;
  --ink-100: #efedf5;
  --ink-150: #ebe7f5;
  --ink-200: #e2dcef;
  --ink-300: #d0cade;
  --ink-400: #a8a2ba;
  --ink-500: #837e95;
  --ink-600: #635e77;
  --ink-700: #4a4560;
  --ink-800: #322d47;
  --ink-900: #1c1730;
  --ink-950: #120e21;
  --white:   #ffffff;

  /* ---- Semantic: status ramps ---- */
  --emerald-50: #e6f8f0; --emerald-500: #10b981; --emerald-600: #0d9e62; --emerald-700: #047857;
  --amber-50:   #fdf1e0; --amber-500:   #f59e0b; --amber-600:   #c2740a; --amber-700:   #b45309;
  --blue-50:    #eaf2fe; --blue-500:    #3b82f6; --blue-600:    #2563eb; --blue-700:    #1d4ed8;
  --rose-50:    #fdecef; --rose-500:    #f43f5e; --rose-600:    #e11d48; --rose-700:    #be123c;

  /* ---- Signature gradients ---- */
  --aurora:      linear-gradient(120deg, #6d28d9 0%, #9333ea 50%, #db2777 112%); /* @kind color */
  --aurora-soft: linear-gradient(120deg, #7c3aed 0%, #a855f7 55%, #e879f9 120%); /* @kind color */
  --aurora-hero: radial-gradient(120% 140% at 15% 0%, #7c3aed 0%, #6d28d9 42%, #4c1d95 100%); /* @kind color */
  --aurora-rail: linear-gradient(180deg, #7c3aed 0%, #db2777 100%); /* @kind color */

  /* ======================================================================
     SEMANTIC ALIASES — reference these in components, not the raw ramps.
     ====================================================================== */

  /* Surfaces & background */
  --color-bg:            #f5f3fb;   /* app canvas */
  --color-surface:       var(--white);
  --color-surface-2:     #faf9fe;   /* subtle raised / striped rows */
  --color-surface-sunken:#f2eefa;   /* wells, inputs on white */
  --color-overlay:       rgba(28, 23, 48, 0.45);

  /* Text */
  --color-text:          var(--ink-900);
  --color-text-muted:    var(--ink-600);
  --color-text-subtle:   var(--ink-400);
  --color-text-inverse:  var(--white);
  --color-text-on-brand: var(--white);

  /* Borders */
  --color-border:        var(--ink-150);
  --color-border-soft:   #f2eefa;
  --color-border-strong: var(--ink-200);

  /* Brand / primary */
  --color-primary:         var(--violet-600);
  --color-primary-hover:   var(--violet-700);
  --color-primary-active:  var(--violet-800);
  --color-primary-tint:    #f3ecfe;
  --color-primary-tint-2:  #e9dffb;
  --color-primary-contrast:var(--white);
  --color-accent:          var(--pink-600);

  /* Focus */
  --color-focus-ring:    rgba(124, 58, 237, 0.35);

  /* Status — each has a base (fg on light), a light bg, and a strong fg */
  --color-success:       var(--emerald-600);
  --color-success-bg:    var(--emerald-50);
  --color-success-fg:    var(--emerald-700);
  --color-warning:       var(--amber-600);
  --color-warning-bg:    var(--amber-50);
  --color-warning-fg:    var(--amber-700);
  --color-info:          var(--blue-600);
  --color-info-bg:       var(--blue-50);
  --color-info-fg:       var(--blue-700);
  --color-danger:        var(--rose-600);
  --color-danger-bg:     var(--rose-50);
  --color-danger-fg:     var(--rose-700);
  --color-neutral-bg:    var(--ink-100);
  --color-neutral-fg:    var(--ink-600);

  /* Data-viz palette (charts) — ordered for categorical series */
  --chart-1: #7c3aed;  /* violet */
  --chart-2: #db2777;  /* pink */
  --chart-3: #2563eb;  /* blue */
  --chart-4: #0d9e62;  /* emerald */
  --chart-5: #f59e0b;  /* amber */
  --chart-6: #06b6d4;  /* cyan */
  --chart-grid: #ece8f6;
  --chart-axis: #9a94ac;
}

/* ---------------------------------------------------------------------------
   DARK THEME — set data-theme="dark" on <html> or any container.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:            #14111f;
  --color-surface:       #1c1830;
  --color-surface-2:     #241f3a;
  --color-surface-sunken:#181428;
  --color-overlay:       rgba(8, 6, 16, 0.6);

  --color-text:          #f3eefb;
  --color-text-muted:    #b3adc9;
  --color-text-subtle:   #7f7a97;
  --color-text-inverse:  var(--ink-900);
  --color-text-on-brand: var(--white);

  --color-border:        #2e2942;
  --color-border-soft:   #26223a;
  --color-border-strong: #3a3452;

  --color-primary:         #8b5cf6;
  --color-primary-hover:   #a78bfa;
  --color-primary-active:  #c4b5fd;
  --color-primary-tint:    #241d3d;
  --color-primary-tint-2:  #2d2450;
  --color-primary-contrast:var(--white);

  --color-focus-ring:    rgba(167, 139, 250, 0.45);

  --color-success-bg: #0e2b20; --color-success-fg: #6ee7b7;
  --color-warning-bg: #2d2110; --color-warning-fg: #fcd34d;
  --color-info-bg:    #10203d; --color-info-fg:    #93c5fd;
  --color-danger-bg:  #2d121b; --color-danger-fg:  #fda4af;
  --color-neutral-bg: #262135; --color-neutral-fg: #b3adc9;

  --chart-grid: #2a2540;
  --chart-axis: #6f6a86;
}