body[data-category="free"]{
  --free-bg:#08151f;
  --free-surface:#102330;
  --free-surface-strong:#173243;
  --free-surface-soft:#0c1c27;
  --free-text:#f4f9fc;
  --free-muted:#a9bdc8;
  --free-border:rgba(194,225,238,.15);
  --free-green:#6ec3d6;
  --free-green-strong:#348fa6;
  --free-accent-rgb:110,195,214;
  --free-gold:#f2bd72;
  --free-danger:#ff8077;
  --free-shadow:0 24px 70px rgba(1,9,15,.3);
  --bg:var(--free-bg);
  --bg-alt:var(--free-surface-soft);
  --bg-spot:#1a4052;
  --panel:var(--free-surface);
  --panel-soft:var(--free-surface-strong);
  --text:var(--free-text);
  --muted:var(--free-muted);
  --border:var(--free-border);
  --border-soft:rgba(194,225,238,.08);
  --accent:var(--free-green);
  --accent2:var(--free-gold);
  --accent-rgb:var(--free-accent-rgb);
  --accent2-rgb:242,189,114;
  background:
    radial-gradient(circle at 8% 8%,rgba(var(--free-accent-rgb),.14),transparent 31rem),
    radial-gradient(circle at 90% 35%,rgba(242,189,114,.09),transparent 30rem),
    var(--free-bg);
  color:var(--free-text);
}

:root[data-theme="light"] body[data-category="free"],
html[data-theme="light"] body[data-category="free"]{
  --free-bg:#f2f6f8;
  --free-surface:#ffffff;
  --free-surface-strong:#e4f0f4;
  --free-surface-soft:#f7fafb;
  --free-text:#17313d;
  --free-muted:#617682;
  --free-border:rgba(34,87,107,.16);
  --free-green:#2f879f;
  --free-green-strong:#21697f;
  --free-accent-rgb:47,135,159;
  --free-gold:#b8732a;
  --free-danger:#c8443d;
  --free-shadow:0 24px 60px rgba(36,75,91,.12);
  --bg:var(--free-bg);
  --bg-alt:var(--free-surface-soft);
  --bg-spot:#d6e9ef;
  --panel:var(--free-surface);
  --panel-soft:var(--free-surface-strong);
  --text:var(--free-text);
  --muted:var(--free-muted);
  --border:var(--free-border);
  --border-soft:rgba(34,87,107,.08);
  --accent:var(--free-green);
  --accent2:var(--free-gold);
  --accent-rgb:var(--free-accent-rgb);
  --accent2-rgb:184,115,42;
  background:
    radial-gradient(circle at 8% 8%,rgba(var(--free-accent-rgb),.14),transparent 31rem),
    radial-gradient(circle at 90% 35%,rgba(184,115,42,.1),transparent 30rem),
    var(--free-bg);
}

body[data-category="free"] .categoryHeader{
  --category-accent:var(--free-green);
  --category-accent-2:var(--free-gold);
  --ch-surface-top:rgba(8,21,31,.985);
  --ch-surface-bottom:rgba(12,28,39,.97);
  --ch-border:var(--free-border);
  --ch-text:var(--free-text);
  --ch-muted:var(--free-muted);
  --ch-chip-bg:rgba(194,225,238,.055);
  --ch-chip-hover:rgba(194,225,238,.1);
  --ch-chip-border:var(--free-border);
  --ch-primary-from:var(--free-green);
  --ch-primary-to:var(--free-gold);
  --ch-primary-text:#0b202a;
  --ch-brand-from:#fff1ca;
  --ch-brand-to:var(--free-gold);
  --ch-panel-top:rgba(8,21,31,.995);
  --ch-panel-bottom:rgba(12,28,39,.995);
  --ch-panel-border:var(--free-border);
  --ch-panel-hover:rgba(var(--free-accent-rgb),.1);
  --ch-highlight:rgba(var(--free-accent-rgb),.13);
  --ch-glow-a:rgba(var(--free-accent-rgb),.14);
  --ch-glow-b:rgba(242,189,114,.12);
}

:root[data-theme="light"] body[data-category="free"] .categoryHeader,
html[data-theme="light"] body[data-category="free"] .categoryHeader{
  --ch-surface-top:rgba(242,246,248,.99);
  --ch-surface-bottom:rgba(228,240,244,.98);
  --ch-border:var(--free-border);
  --ch-text:var(--free-text);
  --ch-muted:var(--free-muted);
  --ch-chip-bg:rgba(255,255,255,.64);
  --ch-chip-hover:rgba(255,255,255,.9);
  --ch-chip-border:var(--free-border);
  --ch-primary-from:var(--free-green);
  --ch-primary-to:var(--free-gold);
  --ch-primary-text:#102934;
  --ch-brand-from:#8c541c;
  --ch-brand-to:var(--free-gold);
  --ch-panel-top:rgba(255,255,255,.995);
  --ch-panel-bottom:rgba(242,246,248,.995);
  --ch-panel-border:var(--free-border);
  --ch-panel-hover:rgba(var(--free-accent-rgb),.09);
  --ch-highlight:rgba(var(--free-accent-rgb),.1);
}