/* Marble Gallery design tokens — see docs/feature/design-system.md.
   Raw palette is fixed; the semantic layer flips for dark mode.
   Contrast notes (verified): brass on onyx 6.6:1, onyx on brass 6.6:1,
   ivory on onyx 17.7:1, brass-deep on ivory 4.7:1. Brass text on a
   light surface is NOT readable — use --accent-ink there. */
:root {
  /* Raw palette */
  --onyx: #101014;
  --onyx-soft: #191920;
  --onyx-lift: #23232c;
  --onyx-line: #2f2f3a;
  --ivory: #faf7f0;
  --alabaster: #f4f0e7;
  --porcelain: #ebe5d9;
  --brass: #b8924d;
  --brass-bright: #d4af6a;
  --brass-deep: #8a6a2e;
  --bronze-smoke: #6b5b45;
  --vein: rgba(16, 16, 20, 0.06);
  --vein-dark: rgba(250, 247, 240, 0.05);

  /* Status (AA on their own tinted grounds) */
  --jade: #2c6b4f;
  --jade-wash: #e4f0e8;
  --jade-ink: #2c6b4f;
  --garnet: #9b2c2c;
  --garnet-wash: #f6e4e4;
  --garnet-ink: #9b2c2c;
  --lapis: #2d4d7a;
  --lapis-wash: #e4ebf5;
  --lapis-ink: #2d4d7a;

  /* Geometry */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --hairline: 1px;
  --check: 96px; /* marble tile size — museum floor, not race flag */

  /* Motion */
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Semantic — light (the gallery by day) */
  --surface: var(--ivory);
  --surface-raised: #fffdf8;
  --surface-sunken: var(--alabaster);
  --surface-inverse: var(--onyx);
  --ink: #16161c;
  --ink-muted: #55524a;
  --ink-faint: #6f6b63;
  --ink-inverse: var(--ivory);
  --line: #ddd6c8;
  --line-strong: #c3bba9;
  --accent: var(--brass);
  --accent-hover: var(--brass-bright);
  --accent-ink: #7d5f28; /* accent-colored TEXT on light — AA on both surfaces */
  --on-accent: var(--onyx); /* text sitting on a brass fill */
  --tile-a: var(--ivory);
  --tile-b: var(--porcelain);
  --veining: var(--vein);
  --shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.06),
    0 1px 3px rgba(16, 16, 20, 0.04);
  --shadow-lift: 0 2px 4px rgba(16, 16, 20, 0.05),
    0 8px 24px rgba(16, 16, 20, 0.08);
  --shadow-deep: 0 4px 8px rgba(16, 16, 20, 0.06),
    0 18px 48px rgba(16, 16, 20, 0.14);
  --ring: 0 0 0 3px rgba(184, 146, 77, 0.38);
  /* Stone finish: raking light across polished marble, and how the
     grain texture composites. Flipped per theme so marble.css needs no
     theme-aware selectors of its own. */
  --sheen-hi: rgba(255, 255, 255, 0.5);
  --sheen-lo: rgba(16, 16, 20, 0.06);
  --grain-blend: multiply;
  --grain-opacity: 0.05;

  /* Aliases for ~60 inline styles in admin templates that reference
     --admin-* names which were never defined anywhere — that text was
     silently falling back to inherit. Retire them as those templates
     get rebuilt in later steps. */
  --admin-text-muted: var(--ink-muted);
  --admin-accent: var(--accent);
  --admin-border: var(--line);
  --admin-bg: var(--surface-sunken);
}

/* Semantic — dark (the gallery at night). Applied by preference, then
   overridden by the explicit toggle in either direction. */
@media (prefers-color-scheme: dark) {
  :root:not([data-dark='false']) {
    --surface: var(--onyx);
    --surface-raised: var(--onyx-soft);
    --surface-sunken: #0b0b0e;
    --surface-inverse: var(--ivory);
    --ink: #f2eee5;
    --ink-muted: #b0aa9c;
    --ink-faint: #8d8779;
    --ink-inverse: var(--onyx);
    --line: var(--onyx-line);
    --line-strong: #3d3d4a;
    --accent: var(--brass);
    --accent-hover: var(--brass-bright);
    --accent-ink: var(--brass-bright);
    --tile-a: var(--onyx);
    --tile-b: var(--onyx-soft);
    --veining: var(--vein-dark);
    --jade-wash: #16281f;
    --garnet-wash: #2b1616;
    --lapis-wash: #16202e;
    --jade-ink: #6fbf95;
    --garnet-ink: #e39a9a;
    --lapis-ink: #93b6e6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4),
      0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-deep: 0 4px 8px rgba(0, 0, 0, 0.45),
      0 18px 48px rgba(0, 0, 0, 0.6);
    --sheen-hi: rgba(255, 255, 255, 0.07);
    --sheen-lo: rgba(0, 0, 0, 0.4);
    --grain-blend: screen;
    --grain-opacity: 0.07;
  }
}

:root[data-dark='true'] {
  --surface: var(--onyx);
  --surface-raised: var(--onyx-soft);
  --surface-sunken: #0b0b0e;
  --surface-inverse: var(--ivory);
  --ink: #f2eee5;
  --ink-muted: #b0aa9c;
  --ink-faint: #8d8779;
  --ink-inverse: var(--onyx);
  --line: var(--onyx-line);
  --line-strong: #3d3d4a;
  --accent-ink: var(--brass-bright);
  --tile-a: var(--onyx);
  --tile-b: var(--onyx-soft);
  --veining: var(--vein-dark);
  --jade-wash: #16281f;
  --garnet-wash: #2b1616;
  --lapis-wash: #16202e;
  --jade-ink: #6fbf95;
  --garnet-ink: #e39a9a;
  --lapis-ink: #93b6e6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-deep: 0 4px 8px rgba(0, 0, 0, 0.45), 0 18px 48px rgba(0, 0, 0, 0.6);
  --sheen-hi: rgba(255, 255, 255, 0.07);
  --sheen-lo: rgba(0, 0, 0, 0.4);
  --grain-blend: screen;
  --grain-opacity: 0.07;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t: 0ms;
    --t-slow: 0ms;
  }
}

/* Icons. Rendered server-side as <svg class="ico"> by internal/icons;
   they inherit color, so a parent's `color` is all that styles them.
   Default tracks the text it sits beside; the size classes are for the
   deliberate exceptions. */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.18em;
  color: inherit;
}
.ico-xs { width: 14px; height: 14px; }
.ico-sm { width: 16px; height: 16px; }
.ico-md { width: 20px; height: 20px; }
.ico-lg { width: 24px; height: 24px; }
.ico-xl { width: 32px; height: 32px; }
/* The large cuts only appear in centred empty states. */
.ico-2xl,
.ico-3xl { display: block; margin: 0 auto 1rem; }
.ico-2xl { width: 48px; height: 48px; }
.ico-3xl { width: 64px; height: 64px; }
.ico-ghost { opacity: 0.35; }
.star-on { color: var(--accent); }
.star-off { color: var(--line-strong); }