/* ============================================================
   OpsAgents AI Design System — Colors & Type
   ------------------------------------------------------------
   The persistent brand layer behind opsagents.agency + its product
   surfaces. This is the SINGLE SOURCE OF TRUTH for tokens.

   VOICE  →  "Sea · Sand · Claude" — a calm, warm, colorful-but-mellow
   board. Warm SAND neutrals lead. SEA teal is the functional primary
   (links, primary actions, focus, selection). SAGE is the calming
   middle (supporting surfaces, soft washes). CLAUDE terracotta is the
   one expressive warm accent, used once per view for the thing that
   matters most. The agent rainbow and the Monday-style status system
   are kept — but DESATURATED so every hue sits quietly on sand. The
   illustrated agent faces stay; they're the warmth that keeps a calm
   palette from going cold.

   RETIRED  →  the fire-orange brand anchor (#F05E22) and the dark
   charcoal default ground. Their token NAMES are kept as compatibility
   aliases (repointed to the new mellow values) so older consumers keep
   resolving — but new work uses the named tokens below.

   LOGO-ONLY  →  the wordmark's violet ring + cyan monogram are kept
   untouched, used ONLY on the mark. Never a general accent.
   Type = Rubik (Latin) + Heebo (Hebrew/RTL) + JetBrains Mono (the
   "// " eyebrow + feed lines).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Heebo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─────────────── Sand · the ground (lead) ───────────────
     Warm, desaturated paper. The page sits on --sand; cards rise to
     --sand-50/100; sunken strips drop to --sand-300. */
  --sand-50:   #FCFAF4;   /* raised card / brightest */
  --sand-100:  #FBF8F1;   /* card */
  --sand-200:  #F4EFE6;   /* page ground */
  --sand-300:  #ECE6D9;   /* section ground / sunken */
  --sand-400:  #E2DAC8;   /* hairline */
  --sand-500:  #D5CAB3;   /* hairline strong / disabled */
  --cream:     #F0EEE6;   /* Claude cream — soft wash block */
  /* semantic aliases (legacy names → sand) */
  --sand:        #F4EFE6;   /* sand surface */
  --sand-raised: #FBF8F1;   /* raised sand card */
  --sand-deep:   #ECE6D9;   /* deepest sand — section ground */
  --sand-ink:    #16303A;   /* deep teal-ink text on sand */
  --sand-hairline:#E2DAC8;  /* hairline on sand */

  /* ─────────────── Sea · the functional primary ───────────────
     Links, primary buttons, focus rings, selection. The one color
     that "does the work." */
  --sea:        #0E7C96;
  --sea-deep:   #0A5A6E;   /* pressed / ink on foam */
  --sea-bright: #2FAFC4;   /* bright accent / gradient stop */
  --sea-soft:   #DCEDF0;   /* soft chip fill */
  --sea-ink:    #0A5567;   /* text on sea-soft */
  --foam:       #E3F4F7;   /* pale teal wash (once per view) */

  /* ─────────────── Sage · the calm middle ───────────────
     Supporting surfaces, healthy washes, the quiet third accent. */
  --sage:       #6F9C76;
  --sage-deep:  #4E7A56;   /* pressed / ink */
  --sage-soft:  #E6EFE3;   /* chip fill */
  --sage-wash:  #EEF4EA;   /* section ground */
  --sage-ink:   #3C6644;   /* text on sage-soft */

  /* ─────────────── Claude · the expressive warm accent ───────────────
     Terracotta "Crail". The kept warm — used ONCE per view for the
     highlight that matters. Replaces the retired fire-orange. */
  --claude:      #D97757;
  --claude-deep: #B65C3F;  /* pressed */
  --claude-hover:#C8694A;
  --claude-soft: #F6E4DA;  /* chip fill */
  --claude-ink:  #A34E2E;  /* text on claude-soft */
  --claude-ring: rgba(217, 119, 87, 0.30); /* focus ring (warm) */
  --claude-orange: #D97757; /* legacy alias */
  --gradient-claude: linear-gradient(135deg, #D97757 0%, #B65C3F 100%); /* @kind color */

  /* ─────────────── Brand · maps to SEA (functional primary) ───────────────
     "Brand" now means the sea-teal functional layer. Legacy
     --brand-orange* names are repointed to Claude terracotta (the kept
     warm accent) so existing kits keep a warm CTA — but the canonical
     primary is sea. */
  --brand:              var(--sea);
  --brand-hover:        #0C6E85;
  --brand-pressed:      var(--sea-deep);
  --brand-soft:         var(--sea-soft);
  --brand-ring:         rgba(14, 124, 150, 0.30);
  --brand-gradient:     linear-gradient(135deg, #0E7C96 0%, #2FAFC4 100%); /* @kind color */
  /* legacy "brand-orange" names → Claude terracotta (warm accent) */
  --brand-orange:       #D97757;
  --brand-orange-dark:  #B65C3F;
  --brand-orange-hover: #C8694A;
  --brand-orange-soft:  #F6E4DA;
  --brand-orange-ring:  rgba(217, 119, 87, 0.30);
  --brand-charcoal:     #16303A;   /* display ink alt → teal-charcoal */

  /* Legacy brand scale → remapped to the SEA ramp (CTA, links, focus) */
  --brand-700:  #073D4A; /* @kind color */
  --brand-600:  #0A5A6E; /* @kind color */
  --brand-500:  #0E7C96; /* @kind color */
  --brand-400:  #2FAFC4; /* @kind color */
  --brand-300:  #7FCAD9; /* @kind color */
  --brand-200:  #BFE4EC; /* @kind color */
  --brand-100:  #DCEDF0; /* @kind color */

  /* ─────────────── Logo / wordmark mark · violet + cyan (LOGO-ONLY) ───────────────
     The OpsAgents wordmark mark keeps its own palette — a violet
     gradient ring + cyan "A" monogram. Use ONLY for the mark itself or
     logo-adjacent lockups, never as a general accent. */
  --logo-violet:       #6C3AED;   /* gradient ring start */
  --logo-violet-light: #9171F8;   /* gradient ring end */
  --logo-cyan:         #5AD6E6;   /* "A" monogram + node dot */
  --logo-ink:          #16303A;   /* "Ops" wordmark */
  --logo-gradient:     linear-gradient(90deg, #6C3AED 0%, #9171F8 100%); /* @kind color */

  /* ─────────────── Surfaces · sand board (light, warm) ─────────────── */
  --canvas:        #F4EFE6;   /* board / page background (sand-200) */
  --canvas-tint:   #ECE6D9;   /* sunken / grouped header strips (sand-300) */
  --surface:       #FBF8F1;   /* cards, lanes, panels (sand-100) */
  --surface-raised:#FCFAF4;   /* raised / brightest card (sand-50) */
  --surface-hover: #FCFAF4;   /* row / card hover */
  --surface-sunken:#ECE6D9;   /* inset wells, search field */
  --scrim:         rgba(22, 48, 58, 0.42); /* modal backdrop */

  /* ─────────────── Surfaces · hero (the landing ground) ─────────────── */
  --hero-canvas:   #F4EFE6;   /* sand hero ground */
  --hero-canvas-2: #FCFAF4;   /* gradient stop / panel face */
  --hero-surface:  rgba(252, 250, 244, 0.78); /* soft cards on hero */
  --hero-ink:      #16303A;   /* teal-charcoal display headline */
  --hero-ink-2:    #3C555F;   /* hero sub-copy */
  --hero-border:   #E2DAC8;   /* hairline on sand hero ground */

  /* ─────────────── Ink · text on sand (teal-charcoal, never pure black) ─────────────── */
  --ink:           #16303A;   /* primary text */
  --ink-2:         #3C555F;   /* secondary text */
  --ink-3:         #6B7E85;   /* muted / meta / placeholder */
  --ink-4:         #97A4A8;   /* faint / disabled */
  --ink-on-color:  #FFFFFF;   /* text on sea / claude / dark fills */

  /* ─────────────── Lines & dividers (warm sand hairlines) ─────────────── */
  --border:        #E2DAC8;   /* default hairline (sand-400) */
  --border-strong: #D5CAB3;   /* emphasized / inputs (sand-500) */
  --border-faint:  #ECE6D9;   /* inner row separators (sand-300) */

  /* ─────────────── Surfaces · deep ink (footer, code, optional dark) ───────────────
     Retained as a deep teal-charcoal (not the old warm charcoal). For
     footers, code blocks, and the Night Shift concept layer. */
  --bg-primary:    #16303A;   /* deep teal-charcoal page */
  --bg-surface:    #1E3C46;   /* dark card / footer */
  --bg-raised:     #274852;   /* elevated dark */
  --bg-overlay:    #305660;   /* dark tooltip / overlay */
  --border-dark:   #2A4A54;
  --border-bright: #3A5B65;

  /* legacy dark-ground text aliases — REPOINTED to sand-era ink tokens (card eEjUXQeP).
     These tokens resolve at 1.00:1 contrast on the mandated --canvas ground when left as-is.
     Repointed so every surface built against --text-* reads correctly on the sand palette.
     Dark-ground values preserved as --text-on-dark-* for Night Shift / dark-bg sections. */
  --text-primary:   var(--ink);    /* was #EAF1F2 — dark-bg value, 1.00:1 on --canvas */
  --text-secondary: var(--ink-2);  /* was #B3C6CA — dark-bg value */
  --text-muted:     var(--ink-3);  /* was #8298A0 — dark-bg value */
  /* Night Shift / dark-surface originals kept under non-aliased names: */
  --text-on-dark-primary:   #EAF1F2;
  --text-on-dark-secondary: #B3C6CA;
  --text-on-dark-muted:     #8298A0;

  /* ─────────────── Rainbow STATUS system — DESATURATED (the signature, mellowed) ───────────────
     Same four states, dimmed to sit on sand. A red pill means
     "needs a human", not "broken". */
  --status-healthy:      #5DA17C;   /* green  · healthy / done */
  --status-healthy-soft: #E4EFE7;
  --status-healthy-ink:  #3C7355;
  --status-working:      #D8A24A;   /* gold   · working / running */
  --status-working-soft: #F6EBD6;
  --status-working-ink:  #8C611A;
  --status-stuck:        #C56A5A;   /* clay   · needs-approval / stuck */
  --status-stuck-soft:   #F4E0D9;
  --status-stuck-ink:    #A0493A;
  --status-idle:         #B5AC9B;   /* sand-grey · idle / not yet run */
  --status-idle-soft:    #ECE6DB;
  --status-idle-ink:     #6C6558;

  /* ─────────────── Accent · links / info / selection → SEA ─────────────── */
  --accent-blue:       #0E7C96;
  --accent-blue-soft:  #DCEDF0;
  --accent-blue-ink:   #0A5567;

  /* ─────────────── Legacy aliases (repointed; kept so older kits resolve) ─────────────── */
  --accent-600: #3C7355; /* @kind color */
  --accent-500: #5DA17C; /* @kind color */
  --accent-400: #79B392; /* @kind color */
  --cyan-500:   #2FAFC4; /* @kind color */
  --cyan-400:   #5AC4D4; /* @kind color */
  --cyan-300:   #9BD8E2; /* @kind color */
  --ink-900:    #16303A; /* @kind color */
  --ink-700:    #3C555F; /* @kind color */
  --ink-500:    #6B7E85; /* @kind color */
  --ink-300:    #D5CAB3; /* @kind color */
  --ink-100:    #ECE6D9; /* @kind color */

  /* ─────────────── Per-agent rainbow — DESATURATED (mellow, sits on sand) ───────────────
     The spectrum runs sea → teal → sage → gold → clay → coral → mauve →
     slate, so it reads as one family, not a crayon box. New work prefers
     the --a-* names; the legacy --agent-* names are repointed to the
     mellow set. */
  --a-sea:    #2E8BA0;  --a-sea-soft:    #DCEBEE;
  --a-teal:   #4FA89B;  --a-teal-soft:   #E0EFEB;
  --a-sage:   #79A87E;  --a-sage-soft:   #E6EFE3;
  --a-gold:   #C9A861;  --a-gold-soft:   #F2EAD4;
  --a-clay:   #D2785C;  --a-clay-soft:   #F4E1D8;
  --a-coral:  #C56A6A;  --a-coral-soft:  #F2DEDE;
  --a-mauve:  #A07898;  --a-mauve-soft:  #ECE2EA;
  --a-slate:  #6E8BA8;  --a-slate-soft:  #E2E8EF;

  /* legacy --agent-* names → mellow hues */
  --agent-violet:  #A07898;  --agent-violet-soft: #ECE2EA;
  --agent-blue:    #6E8BA8;  --agent-blue-soft:   #E2E8EF;
  --agent-sky:     #2E8BA0;  --agent-sky-soft:    #DCEBEE;
  --agent-teal:    #4FA89B;  --agent-teal-soft:   #E0EFEB;
  --agent-green:   #79A87E;  --agent-green-soft:  #E6EFE3;
  --agent-lime:    #9BB070;  --agent-lime-soft:   #EDF1E0;
  --agent-amber:   #C9A861;  --agent-amber-soft:  #F2EAD4;
  --agent-orange:  #D2785C;  --agent-orange-soft: #F4E1D8;
  --agent-coral:   #C56A6A;  --agent-coral-soft:  #F2DEDE;
  --agent-pink:    #BC7C9A;  --agent-pink-soft:   #F0E3EB;
  --agent-purple:  #9A7AA8;  --agent-purple-soft: #ECE4F0;
  --agent-grape:   #8071A8;  --agent-grape-soft:  #E6E2F0;

  /* ─────────────── Semantic (mapped to the mellow status rainbow) ─────────────── */
  --success: #5DA17C;
  --warning: #D8A24A;
  --danger:  #C56A5A;
  --info:    #0E7C96;

  /* ─────────────── Partner accents (use ONLY in partner contexts) ───────────────
     External brands keep their real colors — never re-skinned. */
  --shopify-green:      #96bf48;
  --shopify-green-dark: #5a8a00;
  --shopify-dark:       #1a1a1a;
  --monday-red:    #e44258;
  --monday-yellow: #fdab3d;
  --monday-green:  #00c875;
  --monday-blue:   #0086c0;
  /* Claude co-brand = our own claude terracotta */

  /* ─────────────── Gradients (flat fills lead; gradients are rare) ─────────────── */
  --gradient-sea:   linear-gradient(135deg, #0E7C96 0%, #2FAFC4 100%); /* @kind color */
  --gradient-cta:   linear-gradient(135deg, #0E7C96 0%, #0A5A6E 100%); /* @kind color */
  --gradient-brand: linear-gradient(135deg, #0E7C96 0%, #2FAFC4 100%); /* @kind color */
  --gradient-text:  linear-gradient(135deg, #0E7C96 0%, #D97757 100%); /* @kind color */
  --gradient-hero:  linear-gradient(160deg, #FCFAF4 0%, #F4EFE6 52%, #ECE6D9 100%); /* @kind color */
  --gradient-shopify: linear-gradient(135deg, #96bf48 0%, #5a8a00 100%); /* @kind color */

  /* Soft warm glow behind hero blocks (Claude terracotta, very low) */
  --hero-glow:  radial-gradient(60% 80% at 78% 18%, rgba(217, 119, 87, 0.10) 0%, rgba(217, 119, 87, 0) 70%); /* @kind color */
  --glow-brand: 0 0 0 4px var(--sea-soft); /* @kind shadow */

  /* ─────────────── Type · families ─────────────── */
  --font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; /* legacy alias */
  --font-hebrew:  'Heebo', 'Rubik', system-ui, sans-serif;
  --font-sans-he: 'Heebo', 'Rubik', system-ui, sans-serif; /* legacy alias */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─────────────── Type · weights (Rubik 400–800) ─────────────── */
  --fw-regular:   400;  /* @kind font */
  --fw-medium:    500;  /* @kind font */
  --fw-semibold:  600;  /* @kind font */
  --fw-bold:      700;  /* @kind font */
  --fw-extrabold: 800;  /* @kind font */
  /* legacy aliases */
  --fw-light:   400;  /* @kind font */
  --fw-extra:   800;  /* @kind font */
  --fw-black:   800;  /* @kind font */

  /* ─────────────── Type · scale (marketing-first; board sizes noted) ─────────────── */
  --fs-display:  56px;   /* hero h1 (board reveal uses 34px) */
  --fs-h1:       40px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-kicker:   12px;   /* mono "// " eyebrow, uppercase */
  --fs-micro:    12px;   /* pills, overlines — the 12px readability floor, never smaller */

  /* Line heights / tracking */
  --lh-tight: 1.08; /* @kind font */
  --lh-snug:  1.35; /* @kind font */
  --lh-body:  1.55; /* @kind font */
  --ls-tight: -0.025em; /* @kind font */
  --ls-snug:  -0.01em;  /* @kind font */
  --ls-wide:  0.14em;   /* @kind font */

  /* ─────────────── Spacing (4pt grid) ─────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  /* legacy aliases */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 120px;

  /* ─────────────── Radii (rounded, calm blocks) ─────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;   /* inputs, buttons */
  --radius-md:   13px;   /* avatars-as-square, sub-cards */
  --radius-lg:   16px;   /* cards (--r-card) */
  --radius-xl:   18px;   /* lanes, panels */
  --radius-2xl:  24px;   /* hero / large modals */
  --radius-pill: 999px;  /* status pills, round avatars */
  --r-card:      16px;   /* the canonical card radius */
  /* legacy aliases */
  --r-xs: 6px; --r-sm: 10px; --r-md: 13px; --r-lg: 16px;
  --r-xl: 16px; --r-2xl: 18px; --r-3xl: 24px; --r-pill: 999px;

  /* ─────────────── Shadows (soft, warm teal-ink — lifted, never harsh) ─────────────── */
  --shadow-xs:   0 1px 2px rgba(22, 48, 58, 0.05);
  --shadow-sm:   0 2px 6px rgba(22, 48, 58, 0.06);
  --shadow-card: 0 4px 16px rgba(22, 48, 58, 0.07);
  --shadow-lift: 0 12px 30px rgba(22, 48, 58, 0.12);  /* hover lift */
  --shadow-pop:  0 18px 44px rgba(22, 48, 58, 0.18);  /* modals, menus */
  --shadow-focus: 0 0 0 3px var(--brand-ring);
  /* legacy aliases */
  --sh-1: 0 1px 2px rgba(22,48,58,0.05);
  --sh-2: 0 4px 16px rgba(22,48,58,0.07);
  --sh-3: 0 12px 30px rgba(22,48,58,0.12);
  --sh-card-hover: 0 12px 30px rgba(22,48,58,0.12);
  --sh-lift: 0 18px 44px rgba(22,48,58,0.18);
  --sh-shopify: 0 4px 15px rgba(150, 191, 72, 0.4);

  /* ─────────────── Motion ─────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);       /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */

  /* ─────────────── Sizing / layout ─────────────── */
  --tap:       44px;  /* @kind spacing */
  --lane-w:    300px; /* @kind spacing */
  --avatar-sm: 32px;  /* @kind spacing */
  --avatar-md: 40px;  /* @kind spacing */
  --avatar-lg: 48px;  /* @kind spacing */
  --container: 1280px; /* @kind spacing */
  --nav-h:     64px;   /* @kind spacing */
}

/* ============================================================
   Semantic typography
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* RTL / Hebrew surfaces swap Rubik → Heebo automatically; mono stays LTR */
[lang="he"], [dir="rtl"] {
  --font-display: 'Heebo', 'Rubik', system-ui, sans-serif;
  --font-body:    'Heebo', 'Rubik', system-ui, sans-serif;
}
[dir="rtl"] { font-family: var(--font-hebrew); }
[dir="rtl"] .kicker, [dir="rtl"] .mono,
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] pre { font-family: var(--font-mono); }

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold);      line-height: var(--lh-snug);  letter-spacing: var(--ls-snug); }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold);  line-height: var(--lh-snug); }
h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold);  line-height: var(--lh-snug); }
p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
small, .caption { font-size: var(--fs-caption); color: var(--ink-3); }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* Eyebrow / kicker — the brand signature: mono, "// " prefix, sea-teal */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--sea);
}
.kicker--brand  { color: var(--sea); }
.kicker--sage   { color: var(--sage-ink); }
.kicker--claude { color: var(--claude-ink); }
.kicker--muted  { color: var(--ink-3); }
.kicker--accent { color: var(--sea); }

/* Hero punchline gradient (sea → claude). Use sparingly — once per view, on the h1's
   second line only.

   KEPT DELIBERATELY, card cmAm3IqO. The `impeccable` design hook flags this as
   `category: 'slop'` — a generic-AI-tell heuristic. It is not being honoured here, and the
   reason is not "it was already in the bundle": that is exactly the argument this card
   rejected five times over for the parent-company framing. The reason is that the heuristic
   aims at the violet/cyan hero gradient that marks an unconsidered AI page, and this is a
   named brand decision — sea teal into Claude terracotta, the system's two functional
   accents, once per view. The same registry also flags the warm cream ground and the logo's
   violet ring, so honouring it literally would retire the brand. A taste heuristic does not
   overrule a named brand decision; it also does not get silently ignored, hence this note.

   WHAT THE HOOK DID NOT CATCH, and what is fixed below: `background-clip: text` with
   transparent fill renders the text INVISIBLE — not merely ungradiented — anywhere the clip
   does not apply (Windows High Contrast, `forced-colors: active`, print, older engines).
   README.md prescribes this as the hero-h1 pattern, so that failure would land on the
   largest string on the page. The transparency is therefore gated on support, and
   forced-colors gets an explicit opaque override. */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gradient-text {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    background: none;
  }
}

/* ── Status pill — the desaturated Monday rainbow signature ─────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.status-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill--healthy { background: var(--status-healthy-soft); color: var(--status-healthy-ink); }
.status-pill--working { background: var(--status-working-soft); color: var(--status-working-ink); }
.status-pill--stuck   { background: var(--status-stuck-soft);   color: var(--status-stuck-ink); }
.status-pill--idle    { background: var(--status-idle-soft);    color: var(--status-idle-ink); }

/* Category / count badge */
.category-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}