/* ============================================================
   WriteUpCafe Design System — Tokens & Components
   Source of truth: src/design-system/design.md (2026-04-24).
   All identifiers namespaced .wuc-* / --wuc-* so this file
   coexists safely alongside legacy app.css / home.css / etc.

   Theme default is LIGHT (parchment) per deployment decision
   2026-04-24. Opt any section into the dark espresso theme
   with [data-theme="espresso"] on an ancestor.
   ============================================================ */

/* ---------- Self-hosted Playfair Display (display / headings / wordmark) ---------- */
@font-face { font-family: 'Playfair Display'; font-style: normal;  font-weight: 400; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-Regular.ttf')          format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic;  font-weight: 400; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-Italic.ttf')           format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal;  font-weight: 500; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-Medium.ttf')           format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic;  font-weight: 500; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-MediumItalic.ttf')     format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal;  font-weight: 600; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-SemiBold.ttf')         format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic;  font-weight: 600; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-SemiBoldItalic.ttf')   format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal;  font-weight: 700; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-Bold.ttf')             format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic;  font-weight: 700; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-BoldItalic.ttf')       format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal;  font-weight: 800; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-ExtraBold.ttf')        format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic;  font-weight: 800; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-ExtraBoldItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal;  font-weight: 900; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-Black.ttf')            format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic;  font-weight: 900; font-display: swap; src: url('/assets/fonts/playfair-display/PlayfairDisplay-BlackItalic.ttf')      format('truetype'); }

/* DM Sans comes from Google Fonts; expect the layout to already include the link. */

/* ============================================================
   Core palette (never reference raw hex; always use a token)
   ============================================================ */
:root {
  /* Espresso (dark surfaces, still referenced in light theme for ink/text) */
  --wuc-espresso-dark:   #1a0f06;
  --wuc-espresso-mid:    #251508;
  --wuc-espresso-light:  #1c1008;
  --wuc-espresso-elev:   #2d1a0c;
  --wuc-espresso-sunken: #120a04;

  /* Copper / primary */
  --wuc-primary:         #e87a35;
  --wuc-primary-hover:   #f08a45;
  --wuc-primary-press:   #d26a2a;
  --wuc-primary-ink:     #ffffff;
  --wuc-copper:          #c17d3c;
  --wuc-copper-dark:     #8b4513;
  --wuc-copper-muted:    #a0622d;

  /* Gold (display type on espresso) */
  --wuc-gold-highlight:  #f0c080;
  --wuc-gold-warm:       #e0a030;

  /* Cream / parchment */
  --wuc-cream:           #e8ddd0;
  --wuc-cream-muted:     #ddd0c0;
  --wuc-parchment:       #f5f0e8;
  --wuc-parchment-raised:#fbf7ef;
  --wuc-parchment-sunken:#ece5d8;

  /* Functional / topic tints (muted, dusty — never fully saturated) */
  --wuc-success:         #4ade80;
  --wuc-sage:            #7c9e6b;
  --wuc-steel-blue:      #5b8fbf;
  --wuc-teal:            #5ba8a0;
  --wuc-lavender:        #9b7ec8;
  --wuc-coral:           #e07b6a;

  /* ---------- Semantic (LIGHT/parchment default) ---------- */
  --wuc-bg:              var(--wuc-parchment);
  --wuc-bg-raised:       var(--wuc-parchment-raised);
  --wuc-bg-sunken:       var(--wuc-parchment-sunken);
  --wuc-surface:         rgba(26, 15, 6, 0.03);
  --wuc-surface-hover:   rgba(26, 15, 6, 0.06);
  --wuc-border:          rgba(139, 69, 19, 0.18);
  --wuc-border-strong:   rgba(139, 69, 19, 0.35);
  --wuc-divider:         rgba(139, 69, 19, 0.12);

  --wuc-fg1:             #1a0f06;                         /* primary text */
  --wuc-fg2:             #3d2a18;                         /* secondary body */
  --wuc-fg3:             rgba(26, 15, 6, 0.60);           /* tertiary / meta */
  --wuc-fg-muted:        rgba(26, 15, 6, 0.40);           /* very quiet */
  --wuc-fg-display:      var(--wuc-copper-dark);          /* headings on parchment */
  --wuc-fg-accent:       var(--wuc-copper);

  --wuc-link:            var(--wuc-copper-dark);
  --wuc-link-hover:      var(--wuc-copper);
  --wuc-focus-ring:      0 0 0 3px rgba(232, 122, 53, 0.30);

  /* ---------- Type families ---------- */
  --wuc-font-display:    'Playfair Display', 'Times New Roman', Georgia, serif;
  --wuc-font-body:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wuc-font-mono:       'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --wuc-fs-eyebrow:      10px;
  --wuc-fs-caption:      11px;
  --wuc-fs-small:        13px;
  --wuc-fs-body:         15px;
  --wuc-fs-body-lg:      17px;
  --wuc-fs-h6:           15px;
  --wuc-fs-h5:           18px;
  --wuc-fs-h4:           22px;
  --wuc-fs-h3:           28px;
  --wuc-fs-h2:           36px;
  --wuc-fs-h1:           48px;
  --wuc-fs-display:      64px;

  --wuc-lh-tight:        1.10;
  --wuc-lh-snug:         1.25;
  --wuc-lh-normal:       1.50;
  --wuc-lh-reading:      1.75;

  --wuc-ls-display:     -0.02em;
  --wuc-ls-heading:     -0.01em;
  --wuc-ls-body:         0;
  --wuc-ls-caps:         0.15em;

  /* ---------- Radii ---------- */
  --wuc-r-xs:   4px;
  --wuc-r-sm:   8px;
  --wuc-r-md:  10px;
  --wuc-r-lg:  14px;
  --wuc-r-xl:  20px;
  --wuc-r-pill: 999px;

  /* ---------- Spacing (4-pt scale; never use arbitrary values) ---------- */
  --wuc-s-1:   4px;
  --wuc-s-2:   8px;
  --wuc-s-3:  12px;
  --wuc-s-4:  16px;
  --wuc-s-5:  20px;
  --wuc-s-6:  24px;
  --wuc-s-8:  32px;
  --wuc-s-10: 40px;
  --wuc-s-12: 48px;
  --wuc-s-16: 64px;
  --wuc-s-20: 80px;

  /* ---------- Shadows (warm; never pure black or blue) ---------- */
  --wuc-shadow-sm:    0 1px  2px rgba(26, 15, 6, 0.08);
  --wuc-shadow-md:    0 4px 14px rgba(26, 15, 6, 0.10);
  --wuc-shadow-lg:    0 18px 48px rgba(26, 15, 6, 0.18);
  --wuc-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.50);

  /* ---------- Signature gradients (logo mark + feature icons only) ---------- */
  --wuc-grad-copper:   linear-gradient(135deg, #c17d3c 0%, #8b4513 100%);
  --wuc-grad-gold:     linear-gradient(135deg, #f0c080 0%, #e0a030 100%);
}

/* ============================================================
   Espresso theme — opt-in on any ancestor (section, page, body)
   ============================================================ */
[data-theme="espresso"] {
  --wuc-bg:              var(--wuc-espresso-dark);
  --wuc-bg-raised:       var(--wuc-espresso-mid);
  --wuc-bg-sunken:       var(--wuc-espresso-sunken);
  --wuc-surface:         rgba(255, 255, 255, 0.03);
  --wuc-surface-hover:   rgba(255, 255, 255, 0.06);
  --wuc-border:          rgba(193, 125, 60, 0.18);
  --wuc-border-strong:   rgba(193, 125, 60, 0.35);
  --wuc-divider:         rgba(193, 125, 60, 0.12);

  --wuc-fg1:             var(--wuc-cream);
  --wuc-fg2:             var(--wuc-cream-muted);
  --wuc-fg3:             rgba(221, 208, 192, 0.55);
  --wuc-fg-muted:        rgba(221, 208, 192, 0.35);
  --wuc-fg-display:      var(--wuc-gold-highlight);
  --wuc-fg-accent:       var(--wuc-primary);

  --wuc-link:            var(--wuc-gold-highlight);
  --wuc-link-hover:      var(--wuc-gold-warm);
  --wuc-focus-ring:      0 0 0 3px rgba(240, 192, 128, 0.35);

  --wuc-shadow-sm:       0 1px  2px rgba(0, 0, 0, 0.25);
  --wuc-shadow-md:       0 4px 14px rgba(0, 0, 0, 0.35);
  --wuc-shadow-lg:       0 18px 48px rgba(0, 0, 0, 0.45);
  --wuc-shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Typography primitives — applied via classes, not body reset,
   so we don't hijack legacy pages. Add .wuc-prose on a container
   to enable system typography for that subtree.
   ============================================================ */
.wuc-prose,
.wuc-type {
  font-family: var(--wuc-font-body);
  font-size: var(--wuc-fs-body);
  line-height: var(--wuc-lh-normal);
  color: var(--wuc-fg1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wuc-display, .wuc-h1, .wuc-h2, .wuc-h3 {
  font-family: var(--wuc-font-display);
  color: var(--wuc-fg-display);
  margin: 0;
  text-wrap: balance;
}
.wuc-h4, .wuc-h5, .wuc-h6 {
  font-family: var(--wuc-font-body);
  color: var(--wuc-fg1);
  margin: 0;
}

.wuc-display { font-size: var(--wuc-fs-display); font-weight: 900; line-height: 1.05;                 letter-spacing: var(--wuc-ls-display); }
.wuc-h1      { font-size: var(--wuc-fs-h1);      font-weight: 800; line-height: 1.10;                 letter-spacing: var(--wuc-ls-display); }
.wuc-h2      { font-size: var(--wuc-fs-h2);      font-weight: 700; line-height: 1.15;                 letter-spacing: var(--wuc-ls-heading); }
.wuc-h3      { font-size: var(--wuc-fs-h3);      font-weight: 600; line-height: 1.25;                 letter-spacing: var(--wuc-ls-heading); }
.wuc-h4      { font-size: var(--wuc-fs-h4);      font-weight: 600; line-height: 1.30; }
.wuc-h5      { font-size: var(--wuc-fs-h5);      font-weight: 600; line-height: 1.35; }
.wuc-h6      { font-size: var(--wuc-fs-h6);      font-weight: 600; line-height: 1.40; }

.wuc-body-lg { font-size: var(--wuc-fs-body-lg); line-height: 1.60; color: var(--wuc-fg2); }
.wuc-body    { font-size: var(--wuc-fs-body);    line-height: 1.50; color: var(--wuc-fg2); }
.wuc-small   { font-size: var(--wuc-fs-small);   line-height: 1.45; color: var(--wuc-fg3); }
.wuc-caption { font-size: var(--wuc-fs-caption); line-height: 1.40; color: var(--wuc-fg3); }

.wuc-eyebrow {
  font-family: var(--wuc-font-body);
  font-size: var(--wuc-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--wuc-ls-caps);
  text-transform: uppercase;
  color: var(--wuc-fg-accent);
}

.wuc-lede {
  font-family: var(--wuc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--wuc-fs-h5);
  line-height: 1.5;
  color: var(--wuc-fg2);
}

.wuc-prose p  { font-size: var(--wuc-fs-body-lg); line-height: var(--wuc-lh-reading); color: var(--wuc-fg1); margin: 0 0 var(--wuc-s-5); text-wrap: pretty; }
.wuc-prose h1 { font-family: var(--wuc-font-display); font-size: var(--wuc-fs-h1); font-weight: 800; line-height: 1.10; color: var(--wuc-fg-display); letter-spacing: var(--wuc-ls-display); margin: var(--wuc-s-10) 0 var(--wuc-s-5); text-wrap: balance; }
.wuc-prose h2 { font-family: var(--wuc-font-display); font-size: var(--wuc-fs-h2); font-weight: 700; line-height: 1.15; color: var(--wuc-fg-display); letter-spacing: var(--wuc-ls-heading); margin: var(--wuc-s-8) 0 var(--wuc-s-4); }
.wuc-prose h3 { font-family: var(--wuc-font-display); font-size: var(--wuc-fs-h3); font-weight: 600; line-height: 1.25; color: var(--wuc-fg1);        letter-spacing: var(--wuc-ls-heading); margin: var(--wuc-s-6) 0 var(--wuc-s-3); }
.wuc-prose blockquote {
  font-family: var(--wuc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--wuc-fs-h4);
  line-height: 1.4;
  color: var(--wuc-fg-display);
  border-left: 2px solid var(--wuc-copper);
  padding-left: var(--wuc-s-6);
  margin: var(--wuc-s-6) 0;
}

/* ============================================================
   Buttons — four recipes only (design.md §4)
   All pill-shaped, 40px default / 32px sm / 48px lg,
   150ms ease-out, no transform on hover.
   ============================================================ */
.wuc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wuc-s-2);
  height: 40px;
  padding: 0 22px;
  border-radius: var(--wuc-r-pill);
  border: 1px solid transparent;
  font: 500 14px/1 var(--wuc-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, filter 150ms ease-out;
  white-space: nowrap;
  user-select: none;
}
.wuc-btn:focus-visible { outline: none; box-shadow: var(--wuc-focus-ring); }
.wuc-btn:disabled      { cursor: not-allowed; opacity: 0.5; }
.wuc-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.wuc-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; }
.wuc-btn .wuc-icon { width: 16px; height: 16px; stroke: currentColor; }

.wuc-btn-primary {
  background: var(--wuc-primary);
  color: var(--wuc-primary-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.wuc-btn-primary:hover  { background: var(--wuc-primary-hover); }
.wuc-btn-primary:active { background: var(--wuc-primary-press); box-shadow: none; }

.wuc-btn-secondary {
  background: var(--wuc-copper);
  color: var(--wuc-parchment);
}
.wuc-btn-secondary:hover  { background: var(--wuc-copper-muted); }
.wuc-btn-secondary:active { background: var(--wuc-copper-dark); }

/* .wuc-btn-dark lives only on espresso-themed surfaces */
.wuc-btn-dark {
  background: var(--wuc-espresso-dark);
  color: var(--wuc-cream);
  border: 1px solid var(--wuc-border-strong);
}
.wuc-btn-dark:hover  { background: var(--wuc-espresso-elev); border-color: rgba(193, 125, 60, 0.55); }
.wuc-btn-dark:active { background: var(--wuc-espresso-sunken); }
.wuc-btn-dark .wuc-icon { stroke: var(--wuc-copper); }

.wuc-btn-outline {
  background: transparent;
  color: var(--wuc-fg1);
  border: 1px solid var(--wuc-border-strong);
}
[data-theme="espresso"] .wuc-btn-outline {
  color: var(--wuc-cream);
}
.wuc-btn-outline:hover  { background: var(--wuc-surface-hover); border-color: rgba(193, 125, 60, 0.55); }
.wuc-btn-outline:active { background: var(--wuc-surface); }

/* On parchment, tertiary/outline buttons use primary orange for stroke + text
   to stay readable (design.md §4.4). */
.wuc-btn-outline-primary {
  background: transparent;
  color: var(--wuc-primary);
  border: 1px solid var(--wuc-primary);
}
.wuc-btn-outline-primary:hover  { background: rgba(232, 122, 53, 0.08); }
.wuc-btn-outline-primary:active { background: rgba(232, 122, 53, 0.14); }

/* The "Read More →" chip inside writeup cards — design.md §4.5 */
.wuc-btn-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--wuc-r-pill);
  background: transparent;
  color: var(--wuc-primary);
  border: 1px solid var(--wuc-primary);
  font: 500 13px/1 var(--wuc-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.wuc-btn-read:hover  { background: rgba(232, 122, 53, 0.08); }
.wuc-btn-read:active { background: rgba(232, 122, 53, 0.14); }

.wuc-btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--wuc-r-pill);
  background: transparent;
  border: 1px solid var(--wuc-border);
  color: var(--wuc-fg1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.wuc-btn-icon:hover { background: var(--wuc-surface-hover); border-color: var(--wuc-border-strong); }

/* ============================================================
   Cards, inputs, chips (design.md §5)
   ============================================================ */
.wuc-card {
  background: var(--wuc-bg-raised);
  border: 1px solid var(--wuc-border);
  border-radius: var(--wuc-r-lg);
  padding: var(--wuc-s-5) var(--wuc-s-6);
  box-shadow: var(--wuc-shadow-inset);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.wuc-card:hover {
  border-color: var(--wuc-border-strong);
  box-shadow: var(--wuc-shadow-md), var(--wuc-shadow-inset);
}

.wuc-input {
  width: 100%;
  background: var(--wuc-bg);
  border: 1px solid rgba(139, 69, 19, 0.25);
  border-radius: var(--wuc-r-md);
  color: var(--wuc-fg1);
  padding: 10px 14px;
  font: 400 14px/1.4 var(--wuc-font-body);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
[data-theme="espresso"] .wuc-input { border-color: rgba(193, 125, 60, 0.25); }
.wuc-input::placeholder { color: var(--wuc-fg-muted); }
.wuc-input:hover        { border-color: rgba(139, 69, 19, 0.4); }
[data-theme="espresso"] .wuc-input:hover { border-color: rgba(193, 125, 60, 0.4); }
.wuc-input:focus        { border-color: var(--wuc-primary); outline: none; box-shadow: 0 0 0 3px rgba(232, 122, 53, 0.25); }
.wuc-input:disabled     { opacity: 0.5; cursor: not-allowed; }
.wuc-input-label        { display: block; margin-bottom: 6px; font: 500 13px/1 var(--wuc-font-body); color: var(--wuc-fg2); }
.wuc-input-help         { display: block; margin-top: 6px; font: 400 12px/1 var(--wuc-font-body); color: var(--wuc-fg3); }
.wuc-input-error        { color: var(--wuc-coral); }
.wuc-input.is-error     { border-color: var(--wuc-coral); }
.wuc-input.is-error:focus { box-shadow: 0 0 0 3px rgba(224, 123, 106, 0.25); }

/* Topic chip (design.md §5.3 formula — bg 12% / border 30% / text 100%) */
.wuc-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--wuc-r-pill);
  font: 500 11px/1 var(--wuc-font-body);
  border: 1px solid transparent;
  background: var(--wuc-surface);
  color: var(--wuc-fg2);
}
.wuc-chip[data-topic="business"], .wuc-chip[data-topic="sports"] { background: rgba(91, 143, 191, 0.12); border-color: rgba(91, 143, 191, 0.30); color: var(--wuc-steel-blue); }
.wuc-chip[data-topic="tech"], .wuc-chip[data-topic="ecommerce"]  { background: rgba(91, 168, 160, 0.12); border-color: rgba(91, 168, 160, 0.30); color: var(--wuc-teal); }
.wuc-chip[data-topic="health"], .wuc-chip[data-topic="wellness"] { background: rgba(124, 158, 107, 0.12); border-color: rgba(124, 158, 107, 0.30); color: var(--wuc-sage); }
.wuc-chip[data-topic="travel"], .wuc-chip[data-topic="shopping"] { background: rgba(155, 126, 200, 0.12); border-color: rgba(155, 126, 200, 0.30); color: var(--wuc-lavender); }
.wuc-chip[data-topic="fashion"], .wuc-chip[data-topic="beauty"]  { background: rgba(224, 123, 106, 0.12); border-color: rgba(224, 123, 106, 0.30); color: var(--wuc-coral); }
.wuc-chip[data-topic="finance"]                                   { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.30); color: var(--wuc-success); }

/* Status chip — solid orange for role/status badges (design.md §5.3) */
.wuc-chip-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--wuc-r-pill);
  background: var(--wuc-primary);
  color: var(--wuc-primary-ink);
  font: 500 11px/1.4 var(--wuc-font-body);
  letter-spacing: 0.04em;
}

/* Tab chip (design.md §5.3) */
.wuc-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px;
  border-radius: var(--wuc-r-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--wuc-fg1);
  font: 500 14px/1 var(--wuc-font-body);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.wuc-tab:hover        { background: var(--wuc-surface-hover); }
.wuc-tab[aria-selected="true"] {
  background: rgba(232, 122, 53, 0.12);
  border-color: rgba(232, 122, 53, 0.35);
  color: var(--wuc-primary);
}

/* Sidebar nav row (design.md §5.4) */
.wuc-nav-row {
  display: flex; align-items: center; gap: var(--wuc-s-3);
  height: 40px; padding: 0 14px;
  border-radius: var(--wuc-r-md);
  color: var(--wuc-fg2);
  font: 500 14px/1 var(--wuc-font-body);
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.wuc-nav-row:hover { background: var(--wuc-surface-hover); color: var(--wuc-fg1); }
.wuc-nav-row.is-active {
  background: rgba(232, 122, 53, 0.12);
  color: var(--wuc-primary);
  border: 1px solid rgba(232, 122, 53, 0.25);
}
.wuc-nav-row .wuc-icon         { color: var(--wuc-copper); }
.wuc-nav-row.is-active .wuc-icon { color: var(--wuc-primary); }
.wuc-nav-row .wuc-nav-count {
  margin-left: auto;
  background: rgba(232, 122, 53, 0.18);
  color: var(--wuc-primary);
  border-radius: var(--wuc-r-pill);
  padding: 3px 7px;
  font: 500 11px/1 var(--wuc-font-body);
}

/* ============================================================
   Links (system-styled); opt-in via .wuc-type or <a class="wuc-link">
   ============================================================ */
.wuc-prose a, a.wuc-link {
  color: var(--wuc-link);
  text-decoration: none;
  transition: color 150ms ease;
}
.wuc-prose a:hover, a.wuc-link:hover { color: var(--wuc-link-hover); }

/* ============================================================
   Grain utility (design.md §8.1) — only for full-bleed DARK bands
   ============================================================ */
.wuc-grain { position: relative; isolation: isolate; }
.wuc-grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.10  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0.35;
}
.wuc-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 40%, rgba(193,125,60,0.10) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}
.wuc-grain > * { position: relative; z-index: 1; }

/* ============================================================
   Layout primitives
   ============================================================ */
.wuc-container       { max-width: 1120px; margin: 0 auto; padding: 0 var(--wuc-s-6); }
.wuc-container-prose { max-width: 680px;  margin: 0 auto; padding: 0 var(--wuc-s-6); }