/* Site-template design tokens. Most template differences are expressed purely here, scoped by
   [data-template="<code>"]. :root holds the CLASSIC defaults so that data-template="classic"
   (and any unknown code, which Resolve() maps to classic) reproduces the original look exactly.
   Block partials read these tokens; layout differences that tokens can't express are handled in
   Razor via SiteTemplateRegistry.Layout(). Font @font-face blocks are added in a later task. */

:root,
[data-template="classic"] {
    --tpl-font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tpl-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tpl-surface: #FBFBFA;     /* hero/section paper — matches bg-brand-paper today */
    --tpl-surface-2: #FFFFFF;   /* cards + bg-white section bands */
    --tpl-surface-alt: #F8FAFC; /* alternate section band — matches bg-slate-50 today */
    --tpl-ink: #0F172A;         /* slate-900 */
    --tpl-muted: #475569;       /* slate-600 */
    --tpl-line: #E2E8F0;        /* slate-200 */
    --tpl-radius: 1rem;         /* 16px — current rounded-2xl-ish */
    --tpl-card-radius: 1rem;
    --tpl-hero-media-radius: 24px;   /* classic hero portrait frame == original rounded-[24px] */
    --tpl-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    --tpl-hero-decor: radial-gradient(60% 55% at 85% -5%, var(--accent-tint) 0%, transparent 60%);
    --tpl-ink-soft: #334155;       /* slate-700 — secondary body text */
    --tpl-card-surface: #FFFFFF;   /* elevated card background */
    --tpl-ghost-border: #CBD5E1;   /* slate-300 — secondary/ghost button border */
    --tpl-ghost-bg: #FFFFFF;       /* ghost button background */
    --tpl-ghost-text: #334155;     /* slate-700 — ghost button text */
    --tpl-chip-bg: #FFFFFF;        /* hero chip background */
    --tpl-chip-border: #E2E8F0;    /* slate-200 — hero chip border */
    --tpl-chip-text: #475569;      /* slate-600 — hero chip text */
    --tpl-surface-muted: #F1F5F9;   /* slate-100 — small fills/badges (classic no-op) */
    --tpl-faint: #94A3B8;     /* slate-400 — micro/disabled text (classic no-op) */
    --tpl-faint-2: #64748B;   /* slate-500 — secondary micro text (classic no-op) */
}

/* Body font hook — partials/layout use Tailwind for everything else; this lets a template
   restyle the base font without touching markup. */
body { font-family: var(--tpl-font-body); }


/* === Golos Text (OFL) === */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/golos-text-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/golos-text-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/golos-text-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/golos-text-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/golos-text-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/golos-text-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/golos-text-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/golos-text-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Lora (OFL) === */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lora-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lora-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/lora-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/lora-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lora-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lora-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Nunito (OFL) === */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Onest (OFL) === */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/onest-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/onest-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/onest-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/onest-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/onest-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/onest-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Unbounded (OFL) === */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/unbounded-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/unbounded-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/unbounded-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/unbounded-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/unbounded-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/unbounded-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Manrope (OFL) === */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================================
   Template token blocks. Each [data-template] overrides only palette / fonts /
   radius / shadow / surfaces / decor; layout differences (hero variant, card
   style) are wired in the Razor partials via SiteTemplateRegistry.Layout().
   Accent (--accent) is NEVER set here — it stays the tenant PrimaryColor /
   platform default injected in Index.cshtml. All three blocks below are LIGHT.
   ============================================================================ */

/* === warm — friendly, rounded, cream identity (Nunito, generous radii) ===== */
[data-template="warm"] {
    --tpl-font-head: 'Nunito', system-ui, sans-serif;
    --tpl-font-body: 'Nunito', system-ui, sans-serif;
    --tpl-surface: #FFFBF5;     /* warm cream paper */
    --tpl-surface-2: #FFFFFF;   /* cards float bright against the cream */
    --tpl-surface-alt: #FFF3E6; /* peach alternate band */
    --tpl-ink: #1F2937;
    --tpl-muted: #6B7280;
    --tpl-line: #F1E7D8;        /* sandy hairline, not grey */
    --tpl-radius: 1.5rem;
    --tpl-card-radius: 1.75rem; /* pillowy cards — the signature of the warm look */
    --tpl-hero-media-radius: 2rem;
    --tpl-shadow: 0 8px 24px rgb(232 119 46 / 0.10);  /* soft orange-cast lift */
    /* Two warm light sources: an accent-tinted glow top-right + a fixed peach
       wash bottom-left, so the hero feels sunlit rather than flatly tinted. */
    --tpl-hero-decor:
        radial-gradient(50% 60% at 90% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%),
        radial-gradient(40% 50% at 5% 100%, #FDE9D2 0%, transparent 55%);
    --tpl-ghost-border: #E7D4BE;   /* warm sand border instead of cool slate-300 */
    --tpl-chip-border: #F1E0CC;
    --tpl-surface-muted: #FBEFE0;  /* warm small-fill instead of cool slate-100 */
    --tpl-faint: #9A8C7A;          /* warm grey */
    --tpl-faint-2: #87796A;
}

/* === minimal — flat, near-black ink, maximum whitespace, zero decoration ==== */
[data-template="minimal"] {
    --tpl-font-head: 'Onest', system-ui, sans-serif;
    --tpl-font-body: 'Onest', system-ui, sans-serif;
    --tpl-surface: #FFFFFF;
    --tpl-surface-2: #FFFFFF;   /* no surface contrast — separation is by line, not fill */
    --tpl-surface-alt: #FAFAFA; /* barely-there band so sections still breathe */
    --tpl-ink: #0A0A0A;         /* near-black, editorial */
    --tpl-muted: #6B7280;
    --tpl-line: #ECECEC;        /* the hairline does all the structural work here */
    --tpl-radius: 0.5rem;
    --tpl-card-radius: 0.5rem;
    --tpl-hero-media-radius: 0.75rem;
    --tpl-shadow: none;         /* flat — depth comes from whitespace, not shadow */
    --tpl-hero-decor: none;     /* no glow; the hero is pure paper */
}

/* === nautical — calm coastal teal, Lora serif headings, a tide-line wave ==== */
[data-template="nautical"] {
    --tpl-font-head: 'Lora', Georgia, serif;
    --tpl-font-body: 'Inter', system-ui, sans-serif;
    --tpl-surface: #F5FAFB;     /* pale sea-mist paper */
    --tpl-surface-2: #FFFFFF;
    --tpl-surface-alt: #EAF4F5; /* shallow-water band */
    --tpl-ink: #0B3B43;         /* deep teal ink — never pure black */
    --tpl-muted: #4A6B70;
    --tpl-line: #D5E8EA;
    --tpl-radius: 1rem;
    --tpl-card-radius: 1.25rem;
    --tpl-hero-media-radius: 1.25rem;
    --tpl-shadow: 0 6px 20px rgb(14 124 134 / 0.10);  /* teal-cast lift */
    --tpl-hero-decor: radial-gradient(60% 55% at 85% -5%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%);
    --tpl-ghost-border: #BCD9DC;   /* sea-glass border instead of cool slate-300 */
    --tpl-chip-border: #CFE5E7;
    --tpl-surface-muted: #E6F1F2;  /* misty small-fill */
    --tpl-faint: #6E8A8E;          /* muted teal-grey */
    --tpl-faint-2: #5A7479;
}

/* Tide-line: a low-amplitude white wave hugging the bottom edge of the hero.
   Scoped under [data-template="nautical"] so it can never bleed to another
   template; `main > section:first-of-type` targets ONLY the hero — it is the
   first direct <section> child of <main> (the NavBar partial is outside <main>,
   and the empty-state <section> only renders when there is no hero at all).
   The hero carries pb-16 / lg:pb-24 bottom padding, so 28px of wave sits in the
   gutter and never overlaps content. The white fill matches --tpl-surface-2,
   reading as the next band's water-line rising into the tinted hero. */
[data-template="nautical"] main > section:first-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;          /* hairline overlap kills a sub-pixel seam */
    height: 28px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2028'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2018%20C%20200%200%20400%200%20600%2018%20C%20800%2036%201000%2036%201200%2018%20L1200%2028%20L0%2028%20Z'%20fill='%23FFFFFF'/%3E%3C/svg%3E") repeat-x bottom / auto 28px;
}

/* === vivid — dark, energetic, high-contrast flagship (Unbounded display + Manrope) ==
   The first DARK template. Light ink on near-black violet surfaces; the energy comes
   from a three-stop gradient mesh in the hero (accent + magenta + cyan) reading as a
   nightclub light rig, not a flat tint. Ghost button + chips are inverted to translucent
   white films so they glow against the dark rather than punching holes in it. --accent is
   NEVER set here: the accent-bg primary CTA and accent-text icons ride the tenant override
   / platform default (violet #6D28D9), which carries on dark. Surfaces, ink, ghost/chip
   films, and card-surface are tokens introduced by Task 7's enabler, so the block partials
   stay legible without any per-block dark overrides. */
[data-template="vivid"] {
    --tpl-font-head: 'Unbounded', system-ui, sans-serif;
    --tpl-font-body: 'Manrope', system-ui, sans-serif;
    --tpl-surface: #0F0A1E;        /* near-black violet base */
    --tpl-surface-2: #1A1330;      /* elevated panels */
    --tpl-surface-alt: #150E26;    /* alternate band */
    --tpl-card-surface: #1E1538;   /* filled card */
    --tpl-ink: #F5F3FF;            /* near-white headings */
    --tpl-ink-soft: #D8D2F0;       /* secondary text */
    --tpl-muted: #A99FC9;          /* muted lavender */
    --tpl-line: #2E2552;           /* dark hairline */
    --tpl-radius: 1rem;
    --tpl-card-radius: 1.25rem;
    --tpl-hero-media-radius: 1.5rem;
    --tpl-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
    /* Energetic gradient mesh — three light sources at three corners so the hero never
       reads as a flat fill: tenant accent top-left, magenta top-right, a cool cyan rising
       from below. The accent stop uses color-mix so it tracks the tenant's PrimaryColor. */
    --tpl-hero-decor:
        radial-gradient(45% 55% at 12% 8%, color-mix(in srgb, var(--accent) 50%, transparent) 0%, transparent 60%),
        radial-gradient(50% 60% at 88% 18%, rgba(217, 70, 239, 0.35) 0%, transparent 55%),
        radial-gradient(60% 70% at 50% 110%, rgba(56, 189, 248, 0.20) 0%, transparent 55%);
    /* Ghost button + chips inverted for dark — translucent white films, lit-glass look. */
    --tpl-ghost-border: #3A2F66;
    --tpl-ghost-bg: rgba(255,255,255,0.04);
    --tpl-ghost-text: #F5F3FF;
    --tpl-chip-bg: rgba(255,255,255,0.05);
    --tpl-chip-border: #2E2552;
    --tpl-chip-text: #D8D2F0;
    --tpl-surface-muted: #241B42;   /* dark small-fill */
    --tpl-faint: #B7AEDB;     /* lavender-grey on dark — AA on #0F0A1E */
    --tpl-faint-2: #C8BFE6;
}