/*
  Polli Docs Brand Kit (CSS)
  Generated from packages/ui/tokens.css on 2025-09-15T21:29:10.496Z
  Usage (MkDocs Material):
    - Add to mkdocs.yml: extra_css: [/assets/polli-brand.css]
    - Optionally set theme.logo (light/dark) to wordmarks/*.svg
*/

/* Light tokens (subset) */
:root {
--background: 0 0% 100%;
--foreground: 222 47% 11%; /* deep ink for body text */
--brand-50:  216 33% 98%;
--brand-100: 215 31% 94%;
--brand-200: 215 28% 86%;
--brand-300: 214 24% 76%;
--brand-400: 214 24% 63%;
--brand-500: 214 23% 53%;
--brand-600: 213 30% 41%;
--brand-700: 213 39% 32%;
--brand-800: 214 47% 26%;
--brand-900: 214 61% 18%;
--emerald-50:  154 60% 96%;
--emerald-100: 154 55% 90%;
--emerald-200: 154 60% 80%;
--emerald-300: 154 65% 60%;
--emerald-400: 154 80% 42%;
--emerald-500: 154 100% 31%; /* #00A15A */
--emerald-600: 154 100% 26%;
--emerald-700: 154 100% 22%;
--emerald-800: 154 100% 18%;
--emerald-900: 154 100% 14%;
--saffron-50:  43 100% 96%;
--saffron-100: 43 100% 92%;
--saffron-200: 43 100% 85%;
--saffron-300: 43 100% 70%;
--saffron-400: 43 100% 63%;
--saffron-500: 43 100% 56%; /* #FFC01E */
--saffron-600: 43 100% 48%;
--saffron-700: 43 100% 40%;
--saffron-800: 43 100% 32%;
--saffron-900: 43 100% 25%;
--card: var(--background);
--card-foreground: var(--foreground);
--popover: var(--background);
--popover-foreground: var(--foreground);
--primary: var(--brand-600);
--primary-foreground: 0 0% 98%;
--secondary: var(--brand-100);
--secondary-foreground: 222 47% 11%;
--muted: var(--brand-50);
--muted-foreground: 215 16% 47%;
--accent: var(--brand-100);
--accent-foreground: 222 47% 11%;
--destructive: 0 84% 60%;            /* keep Tailwind red‑500 semantics */
--destructive-foreground: 0 0% 98%;
--border: var(--brand-200);
--input: var(--brand-200);
--ring: var(--emerald-500);
--radius: 0.5rem;
--viz-validated: var(--emerald-500);
--viz-pending:   var(--saffron-500);
--viz-rejected:  0 85% 58%;          /* red-500 analogue */
--hero-bg: radial-gradient(circle at 25% 25%, var(--brand-50) 0%, transparent 50%);
--marker-yellow: linear-gradient(120deg, var(--saffron-200) 0%, var(--saffron-300) 100%);
--link-underline: transparent;
--logo-filter: none; /* Light mode: no filter needed */
}
/* Dark tokens (subset) */
[data-md-color-scheme="slate"] {
--background: 216 33% 7%;
--foreground: 0 0% 98%;
--card: 216 33% 8%;
--card-foreground: 0 0% 98%;
--popover: 216 33% 8%;
--popover-foreground: 0 0% 98%;
--primary: var(--brand-400);
--primary-foreground: 222 47% 10%;
--secondary: 215 28% 16%;
--secondary-foreground: 0 0% 98%;
--muted: 215 28% 16%;
--muted-foreground: 215 20% 65%;
--accent: 215 28% 16%;
--accent-foreground: 0 0% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 0 0% 98%;
--border: 215 28% 16%;
--input:  215 28% 16%;
--ring:   var(--emerald-400);
--viz-validated: var(--emerald-400);
--viz-pending:   var(--saffron-400);
--viz-rejected:  0 72% 50%;
--hero-bg: radial-gradient(circle at 25% 25%, hsl(216 33% 12%) 0%, transparent 50%);
--marker-yellow: linear-gradient(120deg, var(--saffron-400) 0%, var(--saffron-500) 100%);
--link-underline: transparent;
--logo-filter: invert(1) brightness(0.9); /* Dark mode: invert logos for better contrast */
}

/* Minimal Material palette mapping (safe overrides) */
[data-md-color-scheme="default"], :root {
  --md-primary-fg-color: hsl(var(--brand-600));
  --md-accent-fg-color:  hsl(var(--emerald-500));
  --md-default-bg-color: hsl(var(--background));
  --md-default-fg-color: hsl(var(--foreground));
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: hsl(var(--brand-400));
  --md-accent-fg-color:  hsl(var(--emerald-400));
  --md-default-bg-color: hsl(216 33% 7%);
  --md-default-fg-color: hsl(0 0% 98%);
}

/* Optional: header co-brand helper (opt-in via HTML override) */
.polli-cobrand{display:inline-flex;gap:.5rem;align-items:center}
.polli-cobrand img{height:24px}


/* Brand header composition (injected by polli-brand.js) */
.md-header .md-logo .pl-brand img { height: 1.25rem; margin: 0; filter: var(--logo-filter); }
@media (min-width: 960px){ .md-header .md-logo .pl-brand img { height: 1.5rem; } }
[data-polli-logo-swap]{ display:inline-flex; align-items:center; }
[data-polli-logo-swap] [data-polli-wide],
[data-polli-logo-swap] [data-polli-narrow]{ display:inline-flex; align-items:center; gap:.5rem; }
/* Hide textual site title when brand is injected */
.md-header__title .md-header__topic[data-polli-hidden-topic]{ display:none !important; }