/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #1a1106 #f2ede4 #15130f #b8792e #d9a15b #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #15130f;
  --surface: #2c2b27;
  --surface-2: #211f1b;
  --border: #363431;
  --border-strong: #5b5a57;
  --ink: #f2ede4;
  --muted: #9a968f;
  --accent: #b8792e;
  --accent-hover: #c38d4d;
  --accent-ink: #1a1106;
  --accent-text: #d9a15b;
  --accent-strong: #c38e4e;
  --accent-soft: #392916;
  --accent-border: #5e411d;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #152b19;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #38210e;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #391512;
  --danger-strong: #d16969;}

/**
 * app.css — Atelier Noir.
 *
 * A bold, modern, gallery-lit catalogue: sharper corners than the system
 * default, a wider heading scale, and a gold accent that only ever appears
 * as a glow, never a flood. Colours are tokens only — see theme.css for
 * the actual values.
 */

:root {
  /* Sharper, more architectural corners than the system default. */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* A slightly wider, more confident heading for a gallery-style page. */
  --t-3xl: 34px;

  /* Heavier shadows read correctly on dark surfaces where the default,
     tuned for a light page, all but disappears. Built from --canvas (already
     near-black on this palette) rather than a literal colour. */
  --shadow: 0 1px 2px color-mix(in srgb, var(--canvas) 70%, transparent), 0 2px 8px color-mix(in srgb, var(--canvas) 65%, transparent);
  --shadow-raised: 0 4px 12px color-mix(in srgb, var(--canvas) 75%, transparent), 0 16px 40px color-mix(in srgb, var(--canvas) 70%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Hero band — the one place colour is allowed to be loud, and even here it
   is a low glow across a dark ground rather than a flat fill. */
/* ---------------------------------------------------------------------- */

.hero-band {
  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
    radial-gradient(circle at 90% 120%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}

.hero-eyebrow {
  color: var(--accent-text);
  font-weight: 600;
}

.hero-sub {
  color: var(--muted);
}

/* ---------------------------------------------------------------------- */
/* Item visual — the "photograph" for a piece that has none: a spotlit
   backdrop for its category icon, in keeping with a gallery-lit catalogue. */
/* ---------------------------------------------------------------------- */

.item-visual {
  background:
    radial-gradient(circle at 30% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
    var(--surface-2);
}

/* ---------------------------------------------------------------------- */
/* Stat tile icon — accent-strong reads correctly on accent-soft, and that
   pairing has no ready-made utility class. */
/* ---------------------------------------------------------------------- */

.stat-icon-fg {
  color: var(--accent-strong);
}

/* ---------------------------------------------------------------------- */
/* Search field — an icon sitting inside a plain .input without reaching for
   .input-group, which expects a trailing suffix rather than a leading icon. */
/* ---------------------------------------------------------------------- */

.search-field .input {
  padding-left: var(--s-8);
}

.search-field-icon {
  position: absolute;
  left: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Brand mark — a small gold-on-dark monogram instead of the system's flat
   accent block, matching the gallery-lit item visuals above. */
/* ---------------------------------------------------------------------- */

.brand-mark {
  background: color-mix(in srgb, var(--accent) 85%, var(--surface));
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}