/* GidiReads - BEIGE (data-theme="light") repairs for Authors Studio, the story
 * workspaces (Story Bible / Author Notes / Story Metadata), Create Story and
 * Insights (Analytics).
 *
 * Loaded last on every one of those pages. Every rule below is scoped to
 * html[data-theme="light"], so the Dark (plum) and AMOLED themes are untouched.
 *
 * Goal: in Beige mode every studio surface is warm paper - no dark hero
 * gradients, no dark editorial/artwork panels, no dark analytics chrome.
 * Palette: #fdfbf6 / #f3ebe1 / #faf5ec, accents #8e6fb0 / #68478c,
 *         gold #8a6420, ink #30243a, muted #65596b.
 * Layout, radii and shadows stay as designed; only colour/skin changes.
 */

/* ==========================================================================
   1. Shared studio shells - warm paper tokens
   theme.css keeps dark decorative --gold / studio CSS keeps dark muted tones
   and economy-design-system.css keeps dark --gr-* tokens. Re-point them for
   the light studio surfaces only.
   ========================================================================== */
html[data-theme="light"] .studio-shell,
html[data-theme="light"] .shell {
  --gold: #8a6420;                       /* numbers/rules/labels: 4.5:1+ on cream */
  --gold-soft: #e7d7b8;
  --highlight: #8a6420;
  --ink: #30243a;
  --ink-soft: #65596b;
  color: var(--ink, #30243a);
}
html[data-theme="light"] .studio-shell {
  --e-gold: #8a6420;
  --w-gold: #8a6420;
  --story-gold: #8a6420;
  --e-muted: #65596b;
  --w-muted: #65596b;
  --story-muted: #65596b;
  /* economy-design-system.css tokens (Authors Studio + Insights load it) */
  --gr-ink: #30243a;
  --gr-muted: #65596b;
  --gr-bg: #fdfbf6;
  --gr-surface: #fffcf7;
  --gr-surface-2: #faf5ec;
  --gr-line: rgba(81, 57, 91, .16);
  --gr-lilac: #8e6fb0;
  --gr-lilac-strong: #68478c;
  --gr-warm: #8a6420;
  --gr-danger: #a33f4a;
  /* story-workspace.css + chapter-editor.css / my-stories-studio.css tokens */
  --w-bg: #fdfbf6;
  --w-surface: #fdfbf6;
  --w-paper: #fffcf7;
  --w-ink: #30243a;
  --w-line: rgba(81, 57, 91, .15);
  --w-plum: #68478c;
  --w-lilac: #e7d9c4;
  --w-pink: #9c3f6b;
  --e-bg: #fdfbf6;
  --e-surface: #fdfbf6;
  --e-paper: #fffcf7;
  --e-ink: #30243a;
  --e-line: rgba(81, 57, 91, .15);
  --e-plum: #68478c;
  --e-lilac: #e7d9c4;
  --e-focus: #8e6fb0;
  --story-bg: #fdfbf6;
  --story-surface: #fdfbf6;
  --story-paper: #fffcf7;
  --story-ink: #30243a;
  --story-line: rgba(81, 57, 91, .15);
}

/* economy-design-system.css forces dark #180f20 !important form controls, which
 * beats theme.css on the Analytics page (and on raw Authors Studio panels). */
html[data-theme="light"] .studio-shell :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-theme="light"] .an-shell :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  background: var(--input-bg, #fffcf7) !important;
  color: var(--ink, #30243a) !important;
  border-color: rgba(81, 57, 91, .25) !important;
}
html[data-theme="light"] .studio-shell select option,
html[data-theme="light"] .an-shell select option {
  background: #fffcf7;
  color: #30243a;
}

/* ==========================================================================
   2. Warm beige page canvases (studio pages only - this file is not loaded on
   the public site, and these are still scoped to the light theme).
   ========================================================================== */
html[data-theme="light"] .studio-shell {
  background:
    radial-gradient(1100px 520px at 15% -10%, #fffcf7 0%, rgba(255, 253, 249, 0) 62%),
    linear-gradient(180deg, #fdfbf6 0%, #f7f1e7 55%, #faf5ec 100%);
}
html[data-theme="light"] .studio-sidebar {
  background: linear-gradient(180deg, #fffcf7 0%, #fbf5ec 100%);
  border-right-color: rgba(81, 57, 91, .16);
}
html[data-theme="light"] .studio-topbar {
  background: rgba(255, 253, 249, .92) !important;
  border-bottom-color: rgba(81, 57, 91, .14);
}
html[data-theme="light"] .shell {
  background:
    radial-gradient(1100px 520px at 18% -10%, #fffcf7 0%, rgba(255, 253, 249, 0) 60%),
    linear-gradient(180deg, #fdfbf6 0%, #f7f1e7 60%, #faf5ec 100%);
}
html[data-theme="light"] .shell .sidebar {
  background: linear-gradient(180deg, #fffcf7 0%, #fbf5ec 100%);
  border-right-color: rgba(81, 57, 91, .16);
}
html[data-theme="light"] .shell header {
  background: rgba(255, 253, 249, .92);
  border-bottom-color: rgba(81, 57, 91, .14);
}

/* ==========================================================================
   3. All studio pages - eyebrows, sidebar marks, status badges
   ========================================================================== */
html[data-theme="light"] .studio-shell .eyebrow,
html[data-theme="light"] .shell .eyebrow {
  color: var(--accent-strong, #68478c);
}
html[data-theme="light"] .studio-shell :is(.section-kicker, .range-switch button.active) {
  color: var(--accent-strong, #68478c);
}
html[data-theme="light"] .studio-shell .nav-mark {
  color: #65596b;
}
html[data-theme="light"] .studio-shell .studio-nav-item.active .nav-mark {
  color: #68478c;
}
html[data-theme="light"] .studio-shell .story-status-mark {
  color: var(--accent-strong, #68478c);
}
html[data-theme="light"] .studio-shell .studio-footer a {
  color: var(--accent-strong, #68478c);
}
/* Chapter Editor save-state error was tuned for the dark surface. */
html[data-theme="light"] #saveState.error {
  color: #a33f4a;
}

/* ==========================================================================
   4. Authors Studio home
   ========================================================================== */
/* Half of the "Continue writing" hero was a dark editorial artwork panel. It is
 * now warm paper with a sepia-washed photograph and the same composition. */
html[data-theme="light"] .continue-card {
  background: linear-gradient(135deg, #fdfbf6 0%, #f6eee1 52%, #efe3d3 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(81, 57, 91, .14), 0 24px 60px rgba(81, 57, 91, .10) !important;
}
html[data-theme="light"] .continue-card:before {
  background:
    radial-gradient(circle at 78% 35%, rgba(255, 251, 242, .85), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .30), transparent 55%);
}
html[data-theme="light"] .continue-copy h2 {
  color: #30243a !important;
}
html[data-theme="light"] .continue-type,
html[data-theme="light"] .continue-meta,
html[data-theme="light"] .continue-details {
  color: #65596b !important;
}
html[data-theme="light"] .text-action {
  color: #68478c !important;
  border-bottom-color: rgba(104, 71, 140, .45) !important;
}
html[data-theme="light"] .text-action span {
  color: #8a6420 !important;
}
html[data-theme="light"] .editorial-art {
  background: linear-gradient(150deg, #faf5ec, #efe1cf 55%, #ead9c4) !important;
}
html[data-theme="light"] .editorial-image {
  filter: sepia(.45) saturate(.9) brightness(1.35) contrast(.92) !important;
  opacity: .72;
}
html[data-theme="light"] .editorial-vignette {
  background:
    linear-gradient(115deg, rgba(251, 247, 241, .72) 0%, rgba(251, 247, 241, .48) 42%, rgba(243, 235, 225, .30) 100%) !important;
}
html[data-theme="light"] .editorial-glow {
  background: rgba(224, 190, 120, .35);
}
html[data-theme="light"] .editorial-caption {
  color: #5c4a58;
  text-shadow: none;
}
html[data-theme="light"] .editorial-caption i {
  background: rgba(138, 100, 32, .6);
}
/* Cover placeholders / shelf fallbacks used the dark lilac gradient. */
html[data-theme="light"] .cover-placeholder {
  background: linear-gradient(145deg, #f6eee1, #e5d3bf);
  color: #68478c;
}
html[data-theme="light"] .shelf-placeholder {
  background: linear-gradient(145deg, #f6eee1, #e7d7c6);
  color: #68478c;
}

/* Raw chapter-pricing panel controls on the studio home. */
html[data-theme="light"] .chapter-pricing-panel button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #68478c;
  background: linear-gradient(120deg, #8e6fb0, #68478c);
  color: #fff;
  font: 600 11px var(--font-body);
  cursor: pointer;
}
html[data-theme="light"] .chapter-pricing-panel button:disabled {
  border-color: rgba(81, 57, 91, .22);
  background: #faf5ec;
  color: #65596b;
  opacity: 1;
  cursor: not-allowed;
}

/* ==========================================================================
   5. Create Story - sidebar state, step rail and live-preview cover
   The preview "book" was a dark plum block with white copy; it is now a warm
   paper mock cover. The little cover artwork keeps its plum monogram accent.
   ========================================================================== */
html[data-theme="light"] .shell :is(.sidebar nav a.active, .sidebar nav a:hover, .formats input:checked + span, .fit-button.active) {
  color: var(--accent-strong, #68478c);
}
html[data-theme="light"] .shell .progress ol {
  color: #6b5f70;
}
html[data-theme="light"] .shell .progress li.active {
  color: var(--accent-strong, #68478c);
}
html[data-theme="light"] .shell .book {
  background: linear-gradient(150deg, #fffcf7 0%, #f6eee1 48%, #efe2d1 100%);
  color: #30243a;
  box-shadow: inset 0 0 0 1px rgba(81, 57, 91, .15), 0 18px 45px rgba(81, 57, 91, .12);
}
html[data-theme="light"] .shell .cover {
  background: linear-gradient(145deg, #f6eee1, #e6d5c0);
  color: #68478c;
  box-shadow: inset 0 0 0 1px rgba(81, 57, 91, .18), 12px 15px 25px rgba(81, 57, 91, .14);
}
html[data-theme="light"] .shell .cover strong {
  color: #68478c;
}
html[data-theme="light"] .shell .cover small {
  color: #65596b;
}
html[data-theme="light"] .shell .bookcopy {
  color: #30243a;
}
html[data-theme="light"] .shell .bookcopy > small {
  color: #65596b;
  opacity: 1;
}
html[data-theme="light"] .shell .bookcopy p {
  color: #65596b !important;
}
html[data-theme="light"] .shell .bookcopy > span {
  color: #786d79 !important;
}
html[data-theme="light"] .shell footer button {
  background: linear-gradient(120deg, #8e6fb0, #68478c);
  border-color: #68478c;
  color: #fff;
}

/* ==========================================================================
   6. Story Bible / Author Notes / Story Metadata (studio-workspaces.css)
   The hero was a dark gradient with white copy; convert it to a warm paper
   banner. The character illustration is kept as a soft sepia-washed image.
   ========================================================================== */
html[data-theme="light"] .ws-shell {
  --ws-bg: #fdfbf6;
  --ws-panel: #fffcf7;
  --ws-panel-2: #faf5ec;
  --ws-text: #30243a;
  --ws-muted: #65596b;
  --ws-line: rgba(81, 57, 91, .16);
  --ws-accent: #8e6fb0;
  --ws-accent-2: #68478c;
  --ws-gold: #8a6420;                    /* small-caps card kickers reach 4.5:1 */
  --ws-shadow: 0 16px 44px rgba(81, 57, 91, .10);
  background:
    radial-gradient(1050px 500px at 16% -10%, #fffcf7 0%, rgba(255, 253, 249, 0) 62%),
    linear-gradient(180deg, #fdfbf6 0%, #f7f1e7 60%, #faf5ec 100%);
  color: var(--ws-text);
}
html[data-theme="light"] .ws-sidebar {
  background: linear-gradient(180deg, #fffcf7, #fbf5ec);
  border-right-color: rgba(81, 57, 91, .16);
}
html[data-theme="light"] .ws-sidebar nav a {
  color: #65596b;
}
html[data-theme="light"] .ws-sidebar nav a:hover,
html[data-theme="light"] .ws-sidebar nav a.active {
  background: linear-gradient(110deg, rgba(142, 111, 176, .2), rgba(90, 59, 138, .1));
  color: #30243a;
}
html[data-theme="light"] .ws-sidebar nav a:first-letter {
  color: #8e6fb0;
}
html[data-theme="light"] .ws-topbar {
  background: rgba(251, 247, 241, .88);
}
html[data-theme="light"] .ws-hero {
  background:
    linear-gradient(100deg, #fdfbf6 0%, rgba(251, 247, 241, .97) 30%, rgba(246, 238, 225, .82) 52%, rgba(243, 235, 225, .34) 78%, rgba(245, 238, 222, .10) 100%),
    #f3ebe1;
  border-color: rgba(81, 57, 91, .16);
}
html[data-theme="light"] .ws-hero::after {
  background:
    radial-gradient(circle at 74% 26%, rgba(142, 111, 176, .16), transparent 30%),
    linear-gradient(0deg, rgba(245, 238, 222, .28), transparent 60%);
}
html[data-theme="light"] .ws-hero-art {
  opacity: .72;
  filter: sepia(.18) saturate(.9);
}
html[data-theme="light"] .ws-hero h1 {
  color: #30243a;
}
html[data-theme="light"] .ws-hero-copy {
  color: #30243a;
}
html[data-theme="light"] .ws-hero .ws-eyebrow {
  color: #8a6420;
}
html[data-theme="light"] .ws-hero p:not(.ws-eyebrow) {
  color: #65596b;
}
html[data-theme="light"] .ws-hero .ws-character-glow {
  background: rgba(224, 190, 120, .28);
}
html[data-theme="light"] .ws-float-spark {
  background: #caa45f;
  box-shadow: 0 0 12px 4px rgba(202, 164, 95, .4);
}
/* Mobile hero copy sits on its own dark plate in studio-workspaces.css. */
@media (max-width: 650px) {
  html[data-theme="light"] .ws-hero-copy {
    background: linear-gradient(0deg, #fdfbf6 0%, rgba(251, 247, 241, .94) 52%, rgba(251, 247, 241, .55) 78%, rgba(251, 247, 241, 0) 100%);
  }
}
html[data-theme="light"] .ws-status.error {
  color: #a33f4a;
}
html[data-theme="light"] .ws-status.ok {
  color: #2f7d5c;
}
html[data-theme="light"] .ws-tag {
  color: #6b4a9a;
}
html[data-theme="light"] .ws-button {
  background: linear-gradient(120deg, #8e6fb0, #68478c);
  border-color: #68478c;
}
html[data-theme="light"] .ws-button.secondary {
  background: var(--ws-panel-2);
  border-color: var(--ws-line);
  color: var(--ws-text);
}
html[data-theme="light"] .ws-button.danger {
  background: transparent;
  border-color: rgba(163, 63, 74, .38);
  color: #a33f4a;
}

/* ==========================================================================
   7. Story Workspace / Chapter Pricing / Publishing extras
   ========================================================================== */
/* Empty cover fallback was a dark plum gradient block. */
html[data-theme="light"] .workspace-cover-fallback {
  background: linear-gradient(145deg, #f6eee1, #e7d7c6);
  color: #68478c;
}
/* Modal / preview overlays are intentional full-screen scrims, keep them. */

/* ==========================================================================
   8. Insights / Analytics (analytics.css + economy design system)
   ========================================================================== */
html[data-theme="light"] .an-shell {
  /* accent tokens are not re-pointed by analytics.css' own light block */
  --an-bg: #fdfbf6;
  --an-panel: #fffcf7;
  --an-panel2: #faf5ec;
  --an-line: rgba(81, 57, 91, .16);
  --an-text: #30243a;
  --an-muted: #65596b;
  --an-blue: #1f6a86;
  --an-violet: #6c4a9e;
  --an-green: #2f7d5c;
  --an-gold: #8a5d0e;
  --an-pink: #9c3f6b;
  --an-shadow: 0 16px 40px rgba(81, 57, 91, .10);
  /* economy-design-system tokens used by its global form/label rules */
  --gr-ink: #30243a;
  --gr-muted: #65596b;
  --gr-surface: #fffcf7;
  --gr-surface-2: #faf5ec;
  --gr-line: rgba(81, 57, 91, .16);
  --gr-lilac: #8e6fb0;
  --gr-lilac-strong: #68478c;
  --gr-danger: #a33f4a;
  background:
    radial-gradient(950px 440px at 12% -8%, #fffcf7 0%, rgba(255, 253, 249, 0) 60%),
    linear-gradient(180deg, #fdfbf6 0%, #f7f1e7 55%, #faf5ec 100%);
  color: var(--an-text);
}
/* Header / toolbar / cards / panels were dark gradients. */
html[data-theme="light"] .an-shell .an-top {
  border-bottom-color: rgba(81, 57, 91, .16);
}
html[data-theme="light"] .an-shell .an-toolbar,
html[data-theme="light"] .an-shell .an-panel,
html[data-theme="light"] .an-shell .an-metric {
  background: linear-gradient(145deg, #fffcf7, #f8f0e5);
  border-color: rgba(81, 57, 91, .16);
  box-shadow: 0 14px 36px rgba(81, 57, 91, .08);
}
html[data-theme="light"] .an-shell .an-chart,
html[data-theme="light"] .an-shell .an-support-stat,
html[data-theme="light"] .an-shell .an-audience-stat {
  background: #faf4e9;
  border-color: rgba(81, 57, 91, .14);
}
html[data-theme="light"] .an-shell .an-status {
  background: #fffcf7;
  border-color: rgba(81, 57, 91, .22);
  color: #51445b;
}
html[data-theme="light"] .an-shell .an-status[data-kind="error"] {
  border-color: rgba(163, 63, 74, .4);
  background: #fffcf7;
  color: #a33f4a;
}
html[data-theme="light"] .an-shell .an-best-chapter {
  background: linear-gradient(110deg, #f2f7f0, #faf4e9);
  border-color: rgba(47, 125, 92, .28);
}
html[data-theme="light"] .an-shell .an-pill {
  color: #68478c;
  border-color: rgba(104, 71, 140, .35);
  background: #faf5ec;
}
html[data-theme="light"] .an-shell .an-refresh {
  border-color: #68478c;
  background: linear-gradient(120deg, #8e6fb0, #68478c);
  color: #fff;
  box-shadow: none;
}
html[data-theme="light"] .an-shell .an-refresh:hover {
  border-color: #593986;
  box-shadow: none;
}
html[data-theme="light"] .an-shell .an-filter select {
  background: #fffcf7;
  color: #30243a;
  border-color: rgba(81, 57, 91, .25);
}
/* Metric tones were tuned for dark panels; darken them and drop the neon glow. */
html[data-theme="light"] .an-shell .tone-violet { --metric: #6c4a9e; }
html[data-theme="light"] .an-shell .tone-blue   { --metric: #1f6a86; }
html[data-theme="light"] .an-shell .tone-green  { --metric: #2f7d5c; }
html[data-theme="light"] .an-shell .tone-gold   { --metric: #8a5d0e; }
html[data-theme="light"] .an-shell .tone-pink   { --metric: #9c3f6b; }
html[data-theme="light"] .an-shell .an-metric strong {
  text-shadow: none;
}
html[data-theme="light"] .an-shell .an-metric:after {
  opacity: .1;
}
html[data-theme="light"] .an-shell .an-chart h3,
html[data-theme="light"] .an-shell .an-notes b {
  color: #34263f;
}
html[data-theme="light"] .an-shell table th {
  color: #65596b;
}
html[data-theme="light"] .an-shell table td {
  color: #34263f;
  border-bottom-color: rgba(81, 57, 91, .16);
}
html[data-theme="light"] .an-shell .an-help,
html[data-theme="light"] .an-shell .an-empty {
  color: #65596b;
}
/* Chart furniture that was tuned for dark panels. */
html[data-theme="light"] .an-shell .an-gridline {
  stroke: rgba(81, 57, 91, .20);
}
html[data-theme="light"] .an-shell :is(.an-bar-track, .an-rating-track) {
  background: rgba(81, 57, 91, .10);
}