/* ============================================================
   SVG Art module — utilities + filter/pattern definitions
   Inherits the datavis palette: cat-1..6 × 100/300/500/700/900,
   --seq-* and --div-* ramps. Brand-aware via tokens.css.
   ============================================================ */

/* Frame */
.art {
  display: block;
  width: 100%;
  height: auto;
  background: var(--brand-paper);
  font-family: var(--brand-display-font);
}
.art--bordered { border: 1px solid var(--brand-line); }
.art--ink-bg   { background: var(--brand-ink); }
.art--paper-bg { background: var(--brand-paper); }
.art--tint-bg  { background: var(--brand-tint); }

/* SVG fill/stroke utility classes */
.fill-paper  { fill: var(--brand-paper); }
.fill-ink    { fill: var(--brand-ink); }
.fill-primary{ fill: var(--brand-primary); }
.fill-accent { fill: var(--brand-accent); }
.fill-tint   { fill: var(--brand-tint); }

.stroke-paper  { stroke: var(--brand-paper); }
.stroke-ink    { stroke: var(--brand-ink); }
.stroke-primary{ stroke: var(--brand-primary); }
.stroke-accent { stroke: var(--brand-accent); }

/* Categorical fills */
.fill-cat-1-100{fill:var(--cat-1-100)} .fill-cat-1-300{fill:var(--cat-1-300)} .fill-cat-1-500{fill:var(--cat-1-500)} .fill-cat-1-700{fill:var(--cat-1-700)} .fill-cat-1-900{fill:var(--cat-1-900)}
.fill-cat-2-100{fill:var(--cat-2-100)} .fill-cat-2-300{fill:var(--cat-2-300)} .fill-cat-2-500{fill:var(--cat-2-500)} .fill-cat-2-700{fill:var(--cat-2-700)} .fill-cat-2-900{fill:var(--cat-2-900)}
.fill-cat-3-100{fill:var(--cat-3-100)} .fill-cat-3-300{fill:var(--cat-3-300)} .fill-cat-3-500{fill:var(--cat-3-500)} .fill-cat-3-700{fill:var(--cat-3-700)} .fill-cat-3-900{fill:var(--cat-3-900)}
.fill-cat-4-100{fill:var(--cat-4-100)} .fill-cat-4-300{fill:var(--cat-4-300)} .fill-cat-4-500{fill:var(--cat-4-500)} .fill-cat-4-700{fill:var(--cat-4-700)} .fill-cat-4-900{fill:var(--cat-4-900)}
.fill-cat-5-100{fill:var(--cat-5-100)} .fill-cat-5-300{fill:var(--cat-5-300)} .fill-cat-5-500{fill:var(--cat-5-500)} .fill-cat-5-700{fill:var(--cat-5-700)} .fill-cat-5-900{fill:var(--cat-5-900)}
.fill-cat-6-100{fill:var(--cat-6-100)} .fill-cat-6-300{fill:var(--cat-6-300)} .fill-cat-6-500{fill:var(--cat-6-500)} .fill-cat-6-700{fill:var(--cat-6-700)} .fill-cat-6-900{fill:var(--cat-6-900)}

/* Sequential / diverging fills */
.fill-seq-1{fill:var(--seq-1)} .fill-seq-2{fill:var(--seq-2)} .fill-seq-3{fill:var(--seq-3)} .fill-seq-4{fill:var(--seq-4)} .fill-seq-5{fill:var(--seq-5)} .fill-seq-6{fill:var(--seq-6)}

/* Mark typography (the "big number/letter as art" treatment) */
.art-mark {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  letter-spacing: var(--brand-display-tracking);
  text-transform: var(--brand-display-case);
}
[data-brand="ledger"] .art-mark {
  /* Ledger's display is a serif — keep it elegant */
  letter-spacing: -0.02em;
}

/* Caption strip (kicker text on art) */
.art-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Wordmark text */
.art-wordmark {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ============================================================
   Brand-keyed art tokens
   Each brand has its own "art DNA":
   - mood-bg  : default backdrop tint
   - accent-1 : main accent (== brand primary)
   - accent-2 : second hue (== cat-2 by default, may differ)
   - texture  : 'halftone' | 'stripes' | 'wave'  (preferred default)
   ============================================================ */

:root {
  --art-mood-bg: var(--brand-paper);
  --art-accent-1: var(--brand-primary);
  --art-accent-2: var(--cat-2-500);
  --art-accent-3: var(--cat-3-500);
  --art-grain-opacity: 0.7;
}

[data-brand="broadside"] {
  --art-mood-bg: var(--brand-paper);
  --art-accent-1: var(--cat-1-500);
  --art-accent-2: var(--brand-ink);
  --art-accent-3: var(--cat-3-500);
}
[data-brand="vector"] {
  --art-mood-bg: var(--brand-tint);
  --art-accent-1: var(--cat-2-500);
  --art-accent-2: var(--cat-2-900);
  --art-accent-3: var(--cat-5-500);
}
[data-brand="ledger"] {
  --art-mood-bg: var(--brand-paper);
  --art-accent-1: var(--cat-4-500);
  --art-accent-2: var(--cat-3-500);
  --art-accent-3: var(--cat-2-500);
}

/* ============================================================
   Showcase layout helpers (used by svg-art.html)
   ============================================================ */
/* .art-grid ÄR ARTIKELGRIDEN (article.css). Showcasens egen definition med samma namn låg här,
   efter article.css i laddordningen, och skrev över tolv kolumner med auto-fit: var sektion
   blev en spalt på desktop och en rot med span 12 spände nio tomma spår (2026-09-06). */
.art-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}
.art-card {
  display: flex; flex-direction: column;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
}
.art-card__art { aspect-ratio: 16 / 10; overflow: hidden; }
.art-card__art--square { aspect-ratio: 1 / 1; }
.art-card__art--story  { aspect-ratio: 9 / 16; max-height: 600px; }
.art-card__meta {
  padding: var(--space-3) var(--space-4);
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--brand-line);
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--brand-muted);
}
.art-card__meta strong {
  font-family: var(--font-headline); font-weight: 700;
  color: var(--brand-ink); letter-spacing: 0.04em;
}