/*
 * Intersum eCommerce admin overlay — issue #163.
 *
 * Applies the design tokens from intersum-tokens.css onto the Medusa
 * Admin's chrome (login screen, sidebar, top bar, modals, page chrome).
 * Loaded AFTER Medusa's stylesheet by the post-build patcher in
 * services/admin/scripts/build.js — cascade does the override work, no
 * `!important` selector wars.
 *
 * Strategy:
 *   1. Where Medusa exposes a CSS variable for a chrome element, set
 *      the Medusa variable to the matching Intersum token. Medusa's
 *      built-in light/dark cascade then propagates the change.
 *   2. Where Medusa hard-codes a value via a class, selector-override
 *      the class to use the Intersum token.
 *   3. Logo/branding replacement happens at the asset layer (favicon +
 *      logo img src patched by the build script), not here.
 *
 * Medusa Admin 2.4.0 uses a Tailwind-based design system with semantic
 * tokens like `--ui-bg-base`, `--ui-fg-base`, `--ui-button-inverted` etc.
 * These names mostly stable in the 2.x line. When Medusa upgrades major
 * versions, this overlay needs an audit; the Intersum tokens themselves
 * stay invariant.
 */

@import url("./intersum-tokens.css");

/* ─────────────────────────────────────────────────────────────
 * Foundational variable mapping — Medusa's design tokens → Intersum tokens.
 *
 * Medusa Admin v2.x exposes CSS variables under the `--ui-*` namespace
 * (one of: --ui-bg-*, --ui-fg-*, --ui-border-*, --ui-tag-*, --ui-button-*,
 * --ui-input-*, --ui-bg-interactive*, --ui-bg-component-*).
 *
 * Override the most-visible surfaces so the chrome adopts the Intersum
 * palette automatically. Variables not listed here continue to inherit
 * Medusa defaults; if a specific chrome element looks wrong we add a
 * targeted override below in § Selector overrides.
 * ───────────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Background surfaces */
  --ui-bg-base: var(--intersum-bg);
  --ui-bg-subtle: var(--intersum-bg);
  --ui-bg-component: var(--intersum-surface);
  --ui-bg-component-hover: var(--intersum-surface-raised);
  --ui-bg-interactive: var(--intersum-brand);
  --ui-bg-interactive-hover: var(--intersum-brand-hover);

  /* Foreground */
  --ui-fg-base: var(--intersum-fg);
  --ui-fg-subtle: var(--intersum-fg-muted);
  --ui-fg-muted: var(--intersum-fg-subtle);
  --ui-fg-disabled: var(--intersum-fg-subtle);
  --ui-fg-on-color: var(--intersum-brand-fg);

  /* Borders */
  --ui-border-base: var(--intersum-border);
  --ui-border-strong: var(--intersum-border-strong);
  --ui-border-interactive: var(--intersum-brand);

  /* Buttons */
  --ui-button-inverted: var(--intersum-brand);
  --ui-button-inverted-hover: var(--intersum-brand-hover);
  --ui-button-inverted-pressed: var(--intersum-brand-active);

  /* Tags / badges (semantic) */
  --ui-tag-green-bg: var(--intersum-success-tint);
  --ui-tag-green-text: var(--intersum-success);
  --ui-tag-orange-bg: var(--intersum-warning-tint);
  --ui-tag-orange-text: var(--intersum-warning);
  --ui-tag-red-bg: var(--intersum-danger-tint);
  --ui-tag-red-text: var(--intersum-danger);
  --ui-tag-blue-bg: var(--intersum-info-tint);
  --ui-tag-blue-text: var(--intersum-info);
  /* Drop Medusa's accent purple in favour of the Intersum teal-tint so
   * "primary" highlights match the brand. */
  --ui-tag-purple-bg: var(--intersum-brand-tint);
  --ui-tag-purple-text: var(--intersum-brand);
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-theme="dark"] {
    --ui-bg-base: var(--intersum-bg);
    --ui-bg-subtle: var(--intersum-bg);
    --ui-bg-component: var(--intersum-surface);
    --ui-bg-component-hover: var(--intersum-surface-raised);
    --ui-bg-interactive: var(--intersum-brand);
    --ui-bg-interactive-hover: var(--intersum-brand-hover);

    --ui-fg-base: var(--intersum-fg);
    --ui-fg-subtle: var(--intersum-fg-muted);
    --ui-fg-muted: var(--intersum-fg-subtle);
    --ui-fg-disabled: var(--intersum-fg-subtle);
    --ui-fg-on-color: var(--intersum-brand-fg);

    --ui-border-base: var(--intersum-border);
    --ui-border-strong: var(--intersum-border-strong);
    --ui-border-interactive: var(--intersum-brand);

    --ui-button-inverted: var(--intersum-brand);
    --ui-button-inverted-hover: var(--intersum-brand-hover);
    --ui-button-inverted-pressed: var(--intersum-brand-active);

    --ui-tag-purple-bg: var(--intersum-brand-tint);
    --ui-tag-purple-text: var(--intersum-brand);
  }
}

/* ─────────────────────────────────────────────────────────────
 * Typography — Atkinson Hyperlegible. Designed for character
 * disambiguation (1/l/I, 0/O), Apache 2.0 via Google Fonts. The
 * font stylesheet itself is loaded via the index.html patcher;
 * here we just apply the family + sensible OpenType defaults.
 * ───────────────────────────────────────────────────────────── */
html,
body {
  font-family: var(--intersum-font-sans);
  /* Atkinson Hyperlegible has well-balanced defaults; only enable
   * kern + tabular numerals (for aligned IDs / prices in tables). */
  font-feature-settings: "kern", "tnum";
}

/* Use the mono stack for elements Medusa marks as code-ish. */
code,
kbd,
pre,
samp {
  font-family: var(--intersum-font-mono);
}

/* ─────────────────────────────────────────────────────────────
 * Focus ring — design-system commitment is a visible 3px ring on every
 * interactive element. Medusa's default focus ring is thinner.
 * ───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--intersum-focus-ring);
  transition: box-shadow var(--intersum-motion-fast);
}

/* ─────────────────────────────────────────────────────────────
 * Selector overrides — for chrome that doesn't expose CSS variables.
 *
 * These should be rare. Each override is a maintenance burden across
 * Medusa upgrades; prefer the variable-mapping section above whenever
 * Medusa exposes the right variable.
 * ───────────────────────────────────────────────────────────── */

/* Login screen — replace the Medusa wordmark/logo with Intersum's.
 * The Medusa admin's login screen renders a logo via an <svg> or <img>;
 * the post-build patcher injects an Intersum logo into a known slot
 * via the .intersum-login-logo class added by the runtime widget
 * (services/admin/src/admin/widgets/intersum-brand-widget.tsx). */
.intersum-login-logo {
  /* Sized to roughly match Medusa's existing logo dimensions so the
   * overall composition isn't disrupted. */
  width: 40px;
  height: 40px;
  color: var(--intersum-brand);
}

/* Subtle radial gradient anchor on the login screen, per the design
 * system § Motifs. Applied only when the body carries the login route's
 * data attribute, which Medusa sets via React Router. */
body[data-page="login"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 60vmin;
  height: 60vmin;
  background: radial-gradient(circle at top left, var(--intersum-brand-tint), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}