/* RYTHERO visual system 2026 — decorative only, no behavior or layout rewrites.
   HomePremium keeps its already approved cinematic styling.
   Dark graphite + warm ivory + champagne unify all interior pages.
   The small secondary accent varies by page function. */
body.ry-design-system {
  --bg:#090f13; --panel:#121a1e; --text:#f5f1ec; --muted:#b9c1c4;
  --line:#34434a; --green:#e7b38d; --green2:#c59671;
  --ry-accent:#e7b38d; --ry-accent-soft:#f2c7a9;
  --ry-haze:rgba(231,179,141,.085);
  --ry-surface:#111a1f; --ry-surface-deep:#0b1318; --ry-border:#344149;
  background:#090f13; color:var(--text);
}
body.ry-design-system[data-ry-area="writing"] {
  --ry-accent:#c8b4d2; --ry-accent-soft:#e1d0e7; --ry-haze:rgba(200,180,210,.095);
}
body.ry-design-system[data-ry-area="prompt"] {
  --ry-accent:#adcadb; --ry-accent-soft:#cfe2ee; --ry-haze:rgba(173,202,219,.095);
}
body.ry-design-system[data-ry-area="signature"] {
  --ry-accent:#aaccc7; --ry-accent-soft:#cfebe6; --ry-haze:rgba(170,204,199,.095);
}
body.ry-design-system[data-ry-area="editorial"],
body.ry-design-system[data-ry-area="learning"] {
  --ry-accent:#e4b49b; --ry-accent-soft:#f1cfbb; --ry-haze:rgba(228,180,155,.085);
}

/* Brand furniture remains consistent across all languages and all tools. */
body.ry-design-system .nav {
  border-bottom:1px solid rgba(218,222,219,.13);
  color:#f5f1ec;
}
body.ry-design-system .brand { color:#f5f1ec; }
body.ry-design-system .brand img {
  filter:sepia(1) saturate(2.2) hue-rotate(332deg) brightness(1.18);
}
body.ry-design-system .navlinks,body.ry-design-system .tools-nav>summary { color:#c2c9c8; }
body.ry-design-system .navlinks a:hover,body.ry-design-system .tools-nav>summary:hover { color:#f4c3a1; }
body.ry-design-system .tools-dropdown,
body.ry-design-system .mobile-menu-panel {
  background:#10191e; border-color:#3d4a4e;
}
body.ry-design-system .tools-dropdown a:hover,
body.ry-design-system .mobile-menu-panel a:hover,
body.ry-design-system .mobile-menu-panel a:focus-visible {
  background:#1c272c; color:#f8f2ed;
}
body.ry-design-system .tools-dropdown strong,
body.ry-design-system .mobile-menu-panel a { color:#f1ece6; }
body.ry-design-system .tools-dropdown span,
body.ry-design-system .mobile-tools-list a small { color:#b8c1c3; }
body.ry-design-system .mobile-menu summary,
body.ry-design-system .mobile-menu-close,
body.ry-design-system .lang-switch,
body.ry-design-system .pill:not(.primary) {
  background:#111b20; border-color:#3c4b51; color:#f0eee9;
}
body.ry-design-system .lang-switch a { color:#ccd2d1; background:transparent; }
body.ry-design-system .lang-switch a.active {
  color:#f4c29c; background:transparent; border-radius:4px;
  box-shadow:inset 0 -2px 0 #e7b38d;
}
body.ry-design-system .lang-flags a:focus-visible { outline-color:#e7b38d; }
body.ry-design-system .pill.primary {
  color:#151c1e; background:linear-gradient(180deg,#f2caab,#dfae8e);
  border-color:transparent;
}
body.ry-design-system .pill.primary:hover { filter:brightness(1.045); }
body.ry-design-system .tool-flowbar { border-color:var(--ry-border); }
body.ry-design-system .tool-flowbar a.active { background:#253036;color:#f5ede6; }
body.ry-design-system .tool-flowbar a.active b {
  background:#e7b38d; border-color:#e7b38d; color:#151c1e;
}
body.ry-design-system .footer { border-color:#35444c; color:#bec5c5; }
body.ry-design-system .footer-links button,
body.ry-design-system .footer-links a { color:#c3cccb; }
body.ry-design-system .footer-links a:hover { color:#f2bf9c; }
body.ry-design-system .dev-credit { background:#182429; }
body.ry-design-system .dev-scan { background:rgba(221,189,162,.28); }
body.ry-design-system .dev-scan:after {
  background:linear-gradient(90deg,transparent,rgba(238,198,161,.9),transparent);
}
body.ry-design-system .dev-code { color:#e9bb99; }
body.ry-design-system .dev-label { color:#c9ced0; }
body.ry-design-system .dev-name { color:#f2eee9; }
body.ry-design-system .consent {
  background:#131b20; border-color:#715f56; color:#f2ede7;
}
body.ry-design-system .consent-copy { color:#cbd0d0; }
body.ry-design-system .consent-btn {
  background:#202a2f; border-color:#667276; color:#f4f1ed;
}
body.ry-design-system :is(a,button,input,textarea,select,summary):focus-visible {
  outline-color:#f2c3a0;
}

/* Premium internal pages: quiet section-specific highlights, not a rainbow. */
body.ry-design-system :is(.studio-hero,.ws-hero,.tool-hero,.sig,.blog-head) {
  background:radial-gradient(ellipse at 78% 12%,var(--ry-haze),transparent 65%);
}
body.ry-design-system :is(.studio-hero,.ws-hero,.tool-hero,.sig,.blog-head) .eyebrow,
body.ry-design-system .panel-head>span,
body.ry-design-system .sig-head>span { color:var(--ry-accent); }
body.ry-design-system .eyebrow { color:var(--ry-accent); }
body.ry-design-system .card {
  background:linear-gradient(155deg,#192126,#10181c);
  border-color:var(--ry-border);
}
body.ry-design-system .card:hover { border-color:#8d817b; }
body.ry-design-system .tag { color:#172027;background:#e7b38d; }
body.ry-design-system .muted { color:#b9c1c4; }

/* Reuse the same dark surface language across interactive workspaces. */
body.ry-design-system :is(.studio-panel,.ws-card,.sig-panel,.builder,.output-card) {
  background:linear-gradient(160deg,#152026,#0c1419);
  border-color:var(--ry-border);
}
body.ry-design-system :is(.studio-start,.studio-flow,.studio-toolbox,
  .studio-quick-lyrics,.audio-purpose,.ws-kind,.ws-utilities,.ws-personal-story,
  .sig-output,.metric-card,.ws-guide-step,.studio-result-details,
  .studio-inline-advanced,.export-advanced,.guided-preview) {
  background:var(--ry-surface);border-color:var(--ry-border);
}
body.ry-design-system :is(.studio-start,.studio-flow,.ws-kind,.ws-utilities,.audio-purpose)
  :is(strong,p) { color:inherit; }
body.ry-design-system :is(.studio-tabs button,.sig-tabs button,.studio-flow-step,
  .studio-start-actions button,.ws-start-grid button,.smart-chip,.mini-btn) {
  background:#192329;border-color:#435056;color:#e2e5e2;
}
body.ry-design-system :is(.studio-tabs button,.sig-tabs button,.studio-flow-step,
  .studio-start-actions button,.ws-start-grid button,.mini-btn):hover {
  background:#253036;border-color:var(--ry-accent);color:#f5f1ec;
}
body.ry-design-system :is(.studio-tabs button.active,.sig-tabs button.active) {
  background:var(--ry-accent);border-color:var(--ry-accent);color:#111a20;
}
body.ry-design-system .studio-flow-step small,
body.ry-design-system .studio-quick-head>span,
body.ry-design-system .ws-next-step>div>span,
body.ry-design-system .ws-guide-context,
body.ry-design-system .prompt-box>strong { color:var(--ry-accent); }
body.ry-design-system :is(.studio-flow-step,.ws-next-step,.ws-guide-context,
  .studio-how,.ws-guide-step) { border-color:var(--ry-border); }
body.ry-design-system :is(.studio-how,.ws-next-step) {
  background:linear-gradient(145deg,#19272b,#101b20);
}
body.ry-design-system .ws-next-step:not(.is-ready) .pill.primary {
  background:#273138;color:#c5cdcb;border:1px solid #647075;
}
body.ry-design-system .ws-local strong {
  background:#b2cbb7;color:#14211a;
}
body.ry-design-system .ws-start-grid button:hover,
body.ry-design-system .ws-start-grid button.active {
  border-color:var(--ry-accent);background:#222a33;
}
body.ry-design-system .ws-danger { color:#ffc4bc;border-color:#8c514e; }
body.ry-design-system .ws-danger:hover { color:#ffe1dd; }

/* Inputs stay unmistakably readable. Existing light-field conventions remain. */
body.ry-design-system :is(.studio-form,.sig-form) :is(input,select,textarea),
body.ry-design-system .ws-card :is(input,select,textarea),
body.ry-design-system .ws-projectbar select,
body.ry-design-system .ws-version-picks select {
  background:#f4f0e9!important;color:#172127!important;
  border-color:#aab6b6!important;color-scheme:light;
}
body.ry-design-system :is(.studio-form,.sig-form) :is(input,select,textarea):focus,
body.ry-design-system .ws-card :is(input,select,textarea):focus,
body.ry-design-system .ws-projectbar select:focus,
body.ry-design-system .ws-version-picks select:focus {
  background:#fffdf8!important;border-color:#a7785c!important;
  box-shadow:0 0 0 3px rgba(231,179,141,.27)!important;
}
body.ry-design-system :is(.field>input,.field>select,.smart-combobox) {
  background:#111c23;border-color:#52616a;color:#f0f1ef;
}
body.ry-design-system :is(.field>input,.field>select):focus,
body.ry-design-system .smart-combobox:focus-within {
  border-color:var(--ry-accent);box-shadow:0 0 0 3px var(--ry-haze);
}
body.ry-design-system .smart-results {
  background:#18232b;border-color:#52616a;
}
body.ry-design-system .smart-results-toolbar {
  background:linear-gradient(180deg,#18232b 78%,rgba(24,35,43,.95));
}
body.ry-design-system .smart-option { color:#f1f3f1; }
body.ry-design-system .smart-option:hover,
body.ry-design-system .smart-option:focus,
body.ry-design-system .smart-option[aria-selected="true"] {
  background:#283842;color:#fff;
}
body.ry-design-system .smart-more {
  background:#1a2a33;border-color:#597280;color:var(--ry-accent-soft);
}
body.ry-design-system .smart-chip { border-color:#617785;color:#f5f1ed; }
body.ry-design-system .smart-chip:hover { border-color:var(--ry-accent); }
body.ry-design-system .output-card { border-color:#57707c; }
body.ry-design-system .output-head button {
  background:#243039;border-color:#6b808c;color:#f0d2bb;
}
body.ry-design-system .status { color:#b7d4bf; }
body.ry-design-system :is(.field-hint,.ws-field-note,.sig-form small,.studio-mobile-hint,
  .ws-source-explain,.local-save-note,.privacy-mini,.sig-legal,.ws-poem-note) {
  color:#b5c0c2!important;
}
body.ry-design-system .metric-card small { color:#c4cdcc; }
body.ry-design-system .metric-card b { color:#f7f4ef; }
body.ry-design-system .trait-chip {
  background:#1d2a30;border-color:#52676d;color:#e2e9e5;
}
body.ry-design-system .match-bar { background:#27363c; }
body.ry-design-system .match-bar>span { background:#aaccc7; }

/* Blog and learning: warmer editorial rhythm, not additional graphic assets. */
body.ry-design-system .blog-cats a {
  background:#1b252a;border-color:#49545a;color:#e8ded4;
}
body.ry-design-system .blog-cats a:hover {
  border-color:#deb49c;color:#f8dbc6;
}
body.ry-design-system .index-group h3 { color:#f4eee8; }
body.ry-design-system .index-list,
body.ry-design-system .index-list a { border-color:#35434a; }
body.ry-design-system .index-list a { color:#c3ced0; }
body.ry-design-system .index-list a b { color:#a9bdc4; }
body.ry-design-system .index-list a:hover :is(span,b) { color:#f1c6a9; }

@media (prefers-reduced-motion:reduce) {
  body.ry-design-system .pill.primary { transition:none; }
}