/*
 * @gxp-dev/mod-ui — Platform theme bridge.
 *
 * Re-aliases the library's shadcn-style tokens (--background, --foreground,
 * --primary, --border, --ring, --destructive, …) onto the GxP Developer-
 * portal token names (--bg-surface-*, --text-*, --brand-primary,
 * --border-*, --danger, …) so library components inherit the platform's
 * colors, radius, and focus styling with zero per-component work.
 *
 * Usage in a consumer app:
 *
 *   // app entry, AFTER the platform's own token stylesheet:
 *   import "@gxp-dev/mod-ui/styles/themes/platform"
 *
 * The platform's existing theme-switcher (`html.theme-dark` /
 * `html.theme-light`) keeps working — those classes drive the underlying
 * platform tokens which this file forwards into the library's variables.
 *
 * Every var() reference below has a hex fallback so the library still
 * renders sensibly if the platform tokens aren't declared yet (e.g. on
 * a Storybook page, or before the platform stylesheet has loaded).
 */

:root {
  /* ---- Surfaces ---- */
  --background:           var(--bg-surface-1, #0a0a0f);
  --foreground:           var(--text-primary, #ffffff);
  --card:                 var(--bg-surface-3, #18182a);
  --card-foreground:      var(--text-primary, #ffffff);
  --popover:              var(--bg-surface-2, #111118);
  --popover-foreground:   var(--text-primary, #ffffff);

  /* ---- Brand / primary ---- */
  --primary:              var(--brand-primary, #3d3dff);
  --primary-foreground:   var(--text-on-brand, #ffffff);

  /* ---- Secondary / muted / accent ---- */
  --secondary:            var(--bg-surface-2, #111118);
  --secondary-foreground: var(--text-primary, #ffffff);
  --muted:                var(--bg-surface-2, #111118);
  --muted-foreground:     var(--text-secondary, #b8b8c8);
  --accent:               var(--bg-hover, #15152a);
  --accent-foreground:    var(--text-primary, #ffffff);

  /* ---- Status ---- */
  --destructive:          var(--danger, #ff4d5e);
  --destructive-foreground: var(--text-on-brand, #ffffff);
  --success:              var(--success, #00c46a);
  --success-foreground:   var(--text-on-brand, #ffffff);
  --warning:              var(--warning, #ffb020);
  --warning-foreground:   var(--text-on-brand, #ffffff);
  --info:                 var(--info, #4da3ff);
  --info-foreground:      var(--text-on-brand, #ffffff);

  /* ---- Borders / inputs / focus ---- */
  --border:               var(--border-default, #2a2a40);
  --input:                var(--border-default, #2a2a40);
  --ring:                 var(--border-focus, #5151ff);

  /* ---- Radius ---- */
  --radius:               var(--r-md, 8px);

  /* ---- Sidebar (admin chrome) ---- */
  --sidebar:              var(--bg-surface-2, #111118);
  --sidebar-foreground:   var(--text-primary, #ffffff);
  --sidebar-primary:      var(--brand-primary, #3d3dff);
  --sidebar-primary-foreground: var(--text-on-brand, #ffffff);
  --sidebar-accent:       var(--bg-hover, #15152a);
  --sidebar-accent-foreground: var(--text-primary, #ffffff);
  --sidebar-border:       var(--border-subtle, #1a1a2a);
  --sidebar-ring:         var(--border-focus, #5151ff);
}
