/*
 * Vasary design tokens, shared by every plugin stylesheet.
 *
 * These track the app's own theme (packages/ui/styles/theme.css): the neutrals
 * come from --canvas / --surface / --text, the accent from --tint, and the ten
 * artwork status hues are copied verbatim, so a work marked Sold reads the same
 * colour on the customer's site as it does in Vasary.
 *
 * Declared on :root, not on a component, for two reasons: both stylesheets read
 * the same set instead of keeping a copy each, and a theme can override any of
 * them — set the same custom property with higher specificity, for example
 * `html body { --vasary-accent: #b4884a; }`.
 *
 * What deliberately does NOT appear here: font-family. The gallery inherits the
 * theme's type, because it is a block inside someone else's site.
 */

:root {
  /* Neutrals — app --text, --text-muted, --canvas, --surface, --background. */
  --vasary-ink: #11181c;
  --vasary-text: color-mix(in srgb, var(--vasary-ink) 82%, #ffffff);
  --vasary-muted: #6c6c6c;
  --vasary-line: color-mix(in srgb, var(--vasary-ink) 8%, transparent);
  --vasary-line-strong: color-mix(in srgb, var(--vasary-ink) 18%, transparent);
  --vasary-ground: #e9e9ec;
  --vasary-stage: #f1f1f1;
  --vasary-field: #ffffff;

  /* Brand — app --tint. Drives accent-color, focus rings and active controls. */
  --vasary-accent: #1a60dd;
  --vasary-accent-soft: #7a96e8;
  --vasary-accent-contrast: #ffffff;
  --vasary-accent-hover: color-mix(in srgb, var(--vasary-accent) 85%, #000000);
  --vasary-focus: color-mix(in srgb, var(--vasary-accent) 40%, transparent);

  /* Scrims and shadows stay dark in both modes: they sit over imagery. */
  --vasary-scrim: rgba(0, 0, 0, 0.5);
  --vasary-scrim-strong: rgba(0, 0, 0, 0.92);
  --vasary-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

  /* Feedback — app --error and --success. */
  --vasary-error: #dc2626;
  --vasary-error-soft: color-mix(in srgb, var(--vasary-error) 8%, #ffffff);
  --vasary-error-ink: color-mix(in srgb, var(--vasary-error) 75%, #000000);
  --vasary-success: #22c55e;
  --vasary-success-soft: color-mix(in srgb, var(--vasary-success) 12%, #ffffff);
  --vasary-success-ink: color-mix(in srgb, var(--vasary-success) 70%, #000000);

  /* Artwork status — the app's ten, at its light-theme (-600) shades. */
  --vasary-status-available: #059669;
  --vasary-status-sold: #e11d48;
  --vasary-status-on-loan: #ea580c;
  --vasary-status-reserved: #4f46e5;
  --vasary-status-on-hold: #ca8a04;
  --vasary-status-not-for-sale: #0284c7;
  --vasary-status-private-collection: #0d9488;
  --vasary-status-gifted: #db2777;
  --vasary-status-missing: #d97706;
  --vasary-status-to-remove: #dc2626;

  /* Radius — the app's scale. */
  --vasary-radius-sm: 6px;
  --vasary-radius-md: 8px;
  --vasary-radius-lg: 10px;
  --vasary-radius-xl: 14px;

  /* Motion — the app's curves. Durations stay under 300ms. */
  --vasary-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --vasary-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --vasary-ease: 160ms var(--vasary-ease-standard);
}

/*
 * Dark, in two places that must stay in step.
 *
 * A block cannot read whether the theme hosting it is light or dark. By default
 * the reader's own device decides (the media query). A site that is one or the
 * other whatever the reader prefers pins it in Settings → Vasary, which stamps
 * data-vasary-theme on <html> — 'dark' forces the block below, 'light' opts out
 * of the media query.
 *
 * --vasary-line, --vasary-text and --vasary-focus are not repeated: each is a
 * color-mix over a token redefined here, and they follow it.
 */
:root[data-vasary-theme='dark'] {
  --vasary-ink: #faf9f5;
  --vasary-text: color-mix(in srgb, var(--vasary-ink) 82%, #000000);
  --vasary-muted: #87867f;
  --vasary-ground: #0c0c0b;
  --vasary-stage: #1f1e1d;
  --vasary-field: #141413;

  --vasary-accent: #4a60dd;
  --vasary-accent-soft: #8898eb;

  --vasary-error: #ef4444;
  --vasary-error-soft: color-mix(in srgb, var(--vasary-error) 16%, #141413);
  --vasary-error-ink: color-mix(in srgb, var(--vasary-error) 80%, #ffffff);
  --vasary-success: #4ade80;
  --vasary-success-soft: color-mix(in srgb, var(--vasary-success) 16%, #141413);
  --vasary-success-ink: color-mix(in srgb, var(--vasary-success) 80%, #ffffff);

  /* The app's lighter (-400) status shades, for contrast on a dark ground. */
  --vasary-status-available: #34d399;
  --vasary-status-sold: #fb7185;
  --vasary-status-on-loan: #fb923c;
  --vasary-status-reserved: #818cf8;
  --vasary-status-on-hold: #facc15;
  --vasary-status-not-for-sale: #38bdf8;
  --vasary-status-private-collection: #2dd4bf;
  --vasary-status-gifted: #f472b6;
  --vasary-status-missing: #fbbf24;
  --vasary-status-to-remove: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-vasary-theme='light']) {
    --vasary-ink: #faf9f5;
    --vasary-text: color-mix(in srgb, var(--vasary-ink) 82%, #000000);
    --vasary-muted: #87867f;
    --vasary-ground: #0c0c0b;
    --vasary-stage: #1f1e1d;
    --vasary-field: #141413;

    --vasary-accent: #4a60dd;
    --vasary-accent-soft: #8898eb;

    --vasary-error: #ef4444;
    --vasary-error-soft: color-mix(in srgb, var(--vasary-error) 16%, #141413);
    --vasary-error-ink: color-mix(in srgb, var(--vasary-error) 80%, #ffffff);
    --vasary-success: #4ade80;
    --vasary-success-soft: color-mix(
      in srgb,
      var(--vasary-success) 16%,
      #141413
    );
    --vasary-success-ink: color-mix(
      in srgb,
      var(--vasary-success) 80%,
      #ffffff
    );

    /* The app's lighter (-400) status shades, for contrast on a dark ground. */
    --vasary-status-available: #34d399;
    --vasary-status-sold: #fb7185;
    --vasary-status-on-loan: #fb923c;
    --vasary-status-reserved: #818cf8;
    --vasary-status-on-hold: #facc15;
    --vasary-status-not-for-sale: #38bdf8;
    --vasary-status-private-collection: #2dd4bf;
    --vasary-status-gifted: #f472b6;
    --vasary-status-missing: #fbbf24;
    --vasary-status-to-remove: #f87171;
  }
}

/*
 * Native controls — checkboxes, the range thumbs, the sort select — are painted
 * by the browser, and without this they stay in light mode on a dark ground
 * (white boxes on near-black). Scoped to the plugin's own roots on purpose:
 * setting color-scheme on :root would repaint the host theme's controls too.
 */
.vasary-portfolio,
.vasary-page {
  color-scheme: light dark;
}

:root[data-vasary-theme='light'] :is(.vasary-portfolio, .vasary-page) {
  color-scheme: light;
}

:root[data-vasary-theme='dark'] :is(.vasary-portfolio, .vasary-page) {
  color-scheme: dark;
}

/*
 * One status to one colour. Vasary stores the slug with underscores; the
 * attribute carries it unchanged, so both spellings are matched and anything
 * unrecognised falls back to the muted grey rather than losing the dot.
 */
[data-status='available'] {
  --vasary-status: var(--vasary-status-available);
}
[data-status='sold'] {
  --vasary-status: var(--vasary-status-sold);
}
[data-status='on_loan'],
[data-status='on-loan'] {
  --vasary-status: var(--vasary-status-on-loan);
}
[data-status='reserved'] {
  --vasary-status: var(--vasary-status-reserved);
}
[data-status='on_hold'],
[data-status='on-hold'] {
  --vasary-status: var(--vasary-status-on-hold);
}
[data-status='not_for_sale'],
[data-status='not-for-sale'] {
  --vasary-status: var(--vasary-status-not-for-sale);
}
[data-status='private_collection'],
[data-status='private-collection'] {
  --vasary-status: var(--vasary-status-private-collection);
}
[data-status='gifted'] {
  --vasary-status: var(--vasary-status-gifted);
}
[data-status='missing'] {
  --vasary-status: var(--vasary-status-missing);
}
[data-status='to_remove'],
[data-status='to-remove'] {
  --vasary-status: var(--vasary-status-to-remove);
}

/* The dot itself, shared by the gallery card and the Availability filter. */
.vasary-status-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vasary-status, var(--vasary-muted));
}