/* Rendastic Celestial Obsidian. Color-only tokens; geometry and type stay in component styles. */
:root {
  --rd-bg: #050608;
  --rd-bg-rgb: 5 6 8;
  --rd-surface: #111315;
  --rd-surface-rgb: 17 19 21;
  --rd-panel: #1e2022;
  --rd-panel-rgb: 30 32 34;
  --rd-field: #27292c;
  --rd-field-rgb: 39 41 44;
  --rd-hover: #303438;
  --rd-hover-rgb: 48 52 56;
  --rd-line: #3d4349;
  --rd-line-rgb: 61 67 73;
  --rd-line-strong: #64707c;
  --rd-line-strong-rgb: 100 112 124;
  --rd-muted: #98a3ae;
  --rd-muted-rgb: 152 163 174;
  --rd-secondary: #bbc5ce;
  --rd-secondary-rgb: 187 197 206;
  --rd-text: #f8fafc;
  --rd-text-rgb: 248 250 252;
  --rd-primary: #38bdf8;
  --rd-primary-rgb: 56 189 248;
  --rd-primary-hover: #7dd3fc;
  --rd-primary-hover-rgb: 125 211 252;
  --rd-primary-soft: #bae6fd;
  --rd-primary-soft-rgb: 186 230 253;
  --rd-primary-deep: #0c4a6e;
  --rd-primary-deep-rgb: 12 74 110;
  --rd-primary-tint: #102b3b;
  --rd-primary-tint-rgb: 16 43 59;
  --rd-amber: #f59e0b;
  --rd-amber-rgb: 245 158 11;
  --rd-amber-soft: #fcd34d;
  --rd-amber-soft-rgb: 252 211 77;
  --rd-amber-light: #fdead3;
  --rd-amber-light-rgb: 253 234 211;
  --rd-amber-deep: #78350f;
  --rd-amber-deep-rgb: 120 53 15;
  --rd-amber-tint: #302413;
  --rd-amber-tint-rgb: 48 36 19;
  --rd-error: #fca5a5;
  --rd-error-rgb: 252 165 165;
  --rd-error-bg: #3b2024;
  --rd-error-bg-rgb: 59 32 36;
  --rd-success: #86efac;
  --rd-success-rgb: 134 239 172;
  --rd-success-bg: #152c21;
  --rd-success-bg-rgb: 21 44 33;
  --rd-black: #000000;
  --rd-black-rgb: 0 0 0;
  --site-bg: var(--rd-bg);
  --site-text: var(--rd-text);
  --site-muted: var(--rd-secondary);
  --site-cyan: var(--rd-primary);
  --bg: var(--rd-bg);
  --panel: var(--rd-panel);
  --field: var(--rd-field);
  --line: var(--rd-line);
  --muted: var(--rd-muted);
  --text: var(--rd-text);
  --accent: var(--rd-primary);
  --gradient: linear-gradient(var(--rd-primary), var(--rd-primary));
  --primary: 198.4375 93.2039% 59.6078%;
  --primary-disabled: 210.0000 8.9552% 26.2745%;
  --primary-highlight: 199.3701 95.4887% 73.9216%;
  --purple: 198.4375 93.2039% 59.6078%;
  --base-1: 220.0000 23.0769% 2.5490%;
  --base-2: 210.0000 6.2500% 12.5490%;
  --base-3: 216.0000 6.0241% 16.2745%;
  --base-4: 210.0000 7.6923% 20.3922%;
  --base-5: 210.0000 8.9552% 26.2745%;
  --base-6: 210.0000 10.7143% 43.9216%;
  --text-primary: 210.0000 40.0000% 98.0392%;
  --text-inverse: 220.0000 23.0769% 2.5490%;
  --text-contrast: 210.0000 40.0000% 98.0392%;
  --functional-error: 0.0000 93.5484% 81.7647%;
  --functional-warning: 37.6923 92.1260% 50.1961%;
  --functional-success: 141.7143 76.6423% 73.1373%;
  --functional-vip: 32.8571 91.3043% 90.9804%;
  --gradient-primary: linear-gradient(rgb(var(--rd-primary-rgb) / var(--tw-bg-opacity, 1)), rgb(var(--rd-primary-rgb) / var(--tw-bg-opacity, 1)));
  --gradient-purple: var(--gradient-primary);
  --gradient-1: var(--gradient-primary);
}
/* Brand actions and selected states. Solid sky replaces the inherited mint gradient. */
.primary-button, .hero-primary, .scrolled .header-generate, .model-hot {
  background: var(--rd-primary);
  color: var(--rd-bg);
}
.primary-button:hover:not(:disabled), .hero-primary:hover, .scrolled .header-generate:hover {
  background: var(--rd-primary-hover);
}
.primary-button:disabled, .generate-button:disabled {
  background: var(--rd-line);
  color: var(--rd-secondary);
}
.rendastic-mark { color: var(--rd-primary); }
.rendastic-mark rect { fill: var(--rd-panel); }
.login-content { background: var(--rd-panel); }
.login-mark { background: var(--rd-bg); }
.editor-tabs button.selected,
.option-button[aria-pressed=true], .workspace-sidebar .sidebar-link.active {
  background: var(--rd-primary-tint);
  color: var(--rd-primary-hover);
}
input::placeholder, textarea::placeholder { color: var(--rd-muted); }
::selection { background: var(--rd-primary); color: var(--rd-bg); }
/* Amber is reserved for offers, premium highlights and warnings. */
.promotion-banner { background: var(--rd-amber); color: var(--rd-bg); }
.promotion-copy>span:first-child, .promotion-copy strong { color: var(--rd-bg); }
.promotion-countdown>span {
  background: rgb(var(--rd-bg-rgb) / .13);
  border-color: rgb(var(--rd-bg-rgb) / .24);
  color: var(--rd-bg);
}
.promotion-banner .promotion-cta { background: var(--rd-bg); color: var(--rd-text); }
.promotion-banner .promotion-cta:hover { background: var(--rd-panel); }
.promotion-banner .sale-close { background: rgb(var(--rd-bg-rgb) / .14); color: var(--rd-bg); }
.pricing-promotion { background: var(--rd-amber-tint); border-color: var(--rd-amber-deep); }
.promotion-badge, .model-sale { background: var(--rd-amber); color: var(--rd-bg); }
.plan-promotion { background: var(--rd-amber-tint); border-color: var(--rd-amber-deep); color: var(--rd-amber-soft); }
.promotion-terms { color: var(--rd-secondary); }
.plan-card.pro, .plan-card.ultra, .pricing-page .plan-card.pro, .pricing-page .plan-card.ultra { background: var(--rd-panel); }
.plan-card.pro, .pricing-page .plan-card.pro { border-color: var(--rd-primary); }
.plan-card.ultra, .pricing-page .plan-card.ultra { border-color: var(--rd-amber); }
.plan-card.pro h2, .pricing-page .plan-credits b { color: var(--rd-primary-hover); }
.plan-card.ultra h2 { color: var(--rd-amber); }
.plan-buy, .pricing-page .credit-pack>.plan-buy { background: var(--rd-primary); color: var(--rd-bg); }
.pro .plan-buy { background: var(--rd-primary); }
.ultra .plan-buy { background: var(--rd-amber); color: var(--rd-bg); }
.plan-buy:hover { background: var(--rd-primary-hover); }
.ultra .plan-buy:hover { background: var(--rd-amber-soft); }
.plan-card .plan-progress span { background: var(--rd-primary); }
.plan-card.ultra .plan-progress span { background: var(--rd-amber); }
.ultra .plan-unlimited h3, .ultra .plan-unlimited p { color: var(--rd-secondary); }
/* Processing notices keep semantic colors distinct from decorative accents. */
.generation-policy, .pending-recovery { background: var(--rd-amber-tint); border-color: var(--rd-amber-deep); color: var(--rd-amber-light); }
.pending-recovery button { background: var(--rd-amber-deep); color: var(--rd-amber-light); border-color: var(--rd-amber); }
.effect-error, .editor-error { color: var(--rd-error); }
.effect-error { background: var(--rd-error-bg); }
.work-state.is-active { color: var(--rd-success); }
.pricing-promotion .promotion-countdown>span {
  color: var(--rd-amber-soft);
  background: var(--rd-surface);
  border-color: var(--rd-amber-deep);
}

/* Retint decorative raster glows without altering their shape, size or media. */
.brand-glow { filter: url(#rendastic-glow-tint); }