/* theme.css — COLORS ONLY.
   The palette mirrors the reference screenshots: emerald primary, slate
   neutrals, blue info, amber accent, red danger. Everything visual elsewhere
   (app.css structures, utils.css helpers) references these variables, so this
   file is the single place to retheme the app.

   --success-* mirrors --emerald-* on purpose (both are the same green): kept
   as its own token so anything that means "saved" / "is-ok" / "is-complete"
   (see app.css: .flash, .auth-success, the is-up/is-ok/is-saved states) reads
   from a semantically-named success color rather than reusing --primary —
   so a future rebrand (primary color changes) can't accidentally turn every
   "Product saved." confirmation into whatever the new brand color is. */

:root {
  /* Emerald — primary */
  --emerald-50:  #ecfdf5;
  --emerald-200: #a7f3d0;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  /* one step darker than stock 900, so the 5-step ordinal ramp (order-pipeline
     chart) keeps a visible lightness gap between its last two steps */
  --emerald-900: #054436;

  /* Slate — neutrals */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Blue — info */
  --blue-50:  #eff6ff;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* Amber — accent */
  --amber-50:  #fffbeb;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* Red — danger */
  --red-50:  #fef2f2;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;

  /* Green — success (same green as --emerald-*, see file header for why it's separate) */
  --success-50:  #ecfdf5;
  --success-200: #a7f3d0;
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;
  --success-900: #054436;

  --white: #fff;

  /* Semantic roles (what the UI actually asks for) */
  --bg:             var(--slate-100);
  --surface:        var(--white);
  --text:           var(--slate-800);
  --ink:            var(--slate-900);
  --muted:          var(--slate-500);
  --faint:          var(--slate-400);
  --line:           var(--slate-200);
  --line-soft:      var(--slate-100);
  --hover:          var(--slate-50);
  --primary:        var(--emerald-600);
  --primary-strong: var(--emerald-700);
  --primary-soft:   var(--emerald-50);
  --success:        var(--success-600);
  --success-strong: var(--success-700);
  --success-soft:   var(--success-50);

  /* Effects that depend on the palette */
  --shadow-card:  0 1px 2px rgba(15, 23, 42, .04);
  --ring-primary: 0 0 0 3px rgba(5, 150, 105, .15);

  /* Sidebar group colors — one per nav group so sections read apart at a
     glance (app.css maps .nav-group[data-group] onto these). */
  --nav-main:       #475569;
  --nav-catalog:    #7c3aed;
  --nav-purchasing: #2563eb;
  --nav-sales:      #059669;
  --nav-operations: #d97706;
  --nav-finance:    #0d9488;
  --nav-insights:   #db2777;
  --nav-warehouse:  #ea580c;
  --nav-admin:      #4f46e5;
}

/* Base color application (structure/typography live in app.css). */
body { background: var(--bg); color: var(--text); }