/* ============================================================
   @nice2dev/ui — legacy-bg-text-aliases.css

   Opt-in alias layer that maps the conventional shorthand CSS
   variables used by many design systems onto the canonical
   `--nice-*` design tokens shipped by @nice2dev/ui.

   Use case: your app already references `--bg-primary`, `--text-primary`,
   `--border-color`, `--shadow-sm/md/lg`, etc. directly in its own CSS
   (e.g. ported from a custom design system like OmniVerk's `--s-*`
   table) and you want those names to inherit values from the active
   Nice token set instead of re-defining them by hand.

   Usage (after `@nice2dev/ui/style.css`):
       import '@nice2dev/ui/style.css';
       import '@nice2dev/ui/css/legacy-bg-text-aliases.css';

   The fallback chain prefers the canonical Nice token, then the bare
   shorthand the app may have set itself, then a sane hardcoded value.
   This file therefore never *overrides* an explicit app value — it
   only fills in gaps.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-primary:   var(--nice-bg-primary,   var(--bg-primary,   #ffffff));
  --bg-secondary: var(--nice-bg-secondary, var(--bg-secondary, #f8fafc));
  --bg-tertiary:  var(--nice-bg-tertiary,  var(--bg-tertiary,  #f1f5f9));
  --bg-elevated:  var(--nice-bg-elevated,  var(--bg-elevated,  #ffffff));
  --bg-canvas:    var(--nice-bg-canvas,    var(--bg-canvas,    #f8fafc));
  --bg-inset:     var(--nice-bg-tertiary,  var(--bg-inset,     #f1f5f9));

  /* Text */
  --text-primary:   var(--nice-text-primary,   var(--text-primary,   #0f172a));
  --text-secondary: var(--nice-text-secondary, var(--text-secondary, #475569));
  --text-muted:     var(--nice-text-muted,     var(--text-muted,     #94a3b8));
  --text-inverse:   var(--nice-text-inverse,   var(--text-inverse,   #ffffff));

  /* Borders */
  --border-color:  var(--nice-border-color, var(--border-color, #cbd5e1));
  --border-light:  var(--nice-border-light, var(--border-color, #e2e8f0));
  --border-strong: var(--nice-border-strong, var(--border-color, #94a3b8));

  /* Shadows */
  --shadow-sm: var(--nice-shadow-sm, var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)));
  --shadow-md: var(--nice-shadow-md, var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10)));
  --shadow-lg: var(--nice-shadow-lg, var(--shadow-lg, 0 10px 24px rgba(0, 0, 0, 0.15)));
  --shadow-xl: var(--nice-shadow-xl, var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.20)));

  /* Brand / status colors (most commonly aliased shorthand) */
  --color-primary:   var(--nice-primary,   var(--color-primary,   #3b82f6));
  --color-success:   var(--nice-success,   var(--color-success,   #10b981));
  --color-warning:   var(--nice-warning,   var(--color-warning,   #f59e0b));
  --color-error:     var(--nice-error,     var(--color-error,     #ef4444));
  --color-info:      var(--nice-info,      var(--color-info,      #06b6d4));
  --color-accent:    var(--nice-accent,    var(--color-accent,    #8b5cf6));

  /* Hover / surface */
  --hover-bg:        var(--nice-hover-bg,        var(--hover-bg,        #f1f5f9));
  --color-surface:   var(--nice-surface,         var(--color-surface,   #ffffff));
}

/* Dark-mode mirror — applies under the same selectors Nice uses
   for its dark theme. The canonical Nice tokens already swap with
   the data-theme attribute, so the aliases inherit automatically;
   this block re-asserts the chain in case the consumer uses a
   different selector and expects the shorthand vars to follow. */
[data-theme='dark'] :root,
:root[data-theme='dark'],
.dark :root,
.nice-theme-dark :root {
  --bg-primary:   var(--nice-bg-primary,   #0f172a);
  --bg-secondary: var(--nice-bg-secondary, #1e293b);
  --bg-tertiary:  var(--nice-bg-tertiary,  #334155);
  --bg-elevated:  var(--nice-bg-elevated,  #1e293b);
  --bg-canvas:    var(--nice-bg-canvas,    #0f172a);

  --text-primary:   var(--nice-text-primary,   #f8fafc);
  --text-secondary: var(--nice-text-secondary, #cbd5e1);
  --text-muted:     var(--nice-text-muted,     #64748b);

  --border-color: var(--nice-border-color, #334155);
}
