/* Spark on top of Basecoat (shadcn/ui as CSS). Basecoat owns buttons, cards,
   inputs, tables, badges, alerts, dialogs and the sidebar; this file holds the
   theme tokens and the few Spark-specific pieces (status colours, gauges, calendar). */

:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --radius: 0.5rem;
  /* Spark accent: the "spark" amber is used for the brand mark, gauges and pending states.
     Primary stays dark so the amber reads as a signal, not as chrome. */
  --spark: #F2A516;
  --st-draft-bg: #EEF0EA;   --st-draft-fg: #6B7280;
  --st-pending-bg: #FDEFD2; --st-pending-fg: #9A6400;
  --st-sched-bg: #E3E9FC;   --st-sched-fg: #2E5BE8;
  --st-pub-bg: #DFF3E8;     --st-pub-fg: #1E8A5A;
  --st-fail-bg: #FBE3E1;    --st-fail-fg: #C73A33;
}
.dark {
  --st-draft-bg: #262a30;   --st-draft-fg: #a1a1aa;
  --st-pending-bg: #3a2c08; --st-pending-fg: #f3c56b;
  --st-sched-bg: #15224d;   --st-sched-fg: #93aef7;
  --st-pub-bg: #0f3324;     --st-pub-fg: #6fd3a3;
  --st-fail-bg: #41181a;    --st-fail-fg: #f09a95;
}
body { background: var(--background); color: var(--foreground); }

/* status badges: <span class="badge st-published"> */
.badge.st-draft            { background: var(--st-draft-bg);   color: var(--st-draft-fg);   border-color: transparent; }
.badge.st-pending_approval { background: var(--st-pending-bg); color: var(--st-pending-fg); border-color: transparent; }
.badge.st-scheduled,
.badge.st-publishing       { background: var(--st-sched-bg);   color: var(--st-sched-fg);   border-color: transparent; }
.badge.st-published        { background: var(--st-pub-bg);     color: var(--st-pub-fg);     border-color: transparent; }
.badge.st-failed           { background: var(--st-fail-bg);    color: var(--st-fail-fg);    border-color: transparent; }
.badge.dot { padding-inline: 0.3rem; } .badge.dot::before { content: ""; width: .375rem; height: .375rem; border-radius: 999px; background: currentColor; }

/* destructive outline button for row actions */
.btn.danger { color: var(--destructive); }

/* the gauge: per-platform character budget */
.gauge { height: 4px; background: var(--muted); border-radius: 2px; overflow: hidden; }
.gauge > span { display: block; height: 100%; background: var(--spark); transition: width .15s ease; }
.gauge.warn > span { background: #D98E07; }
.gauge.over > span { background: var(--destructive); }
@media (prefers-reduced-motion: reduce) { .gauge > span { transition: none; } }

/* calendar */
.cal-day { min-height: 7rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .375rem; }
.cal-day.other { background: var(--muted); color: var(--muted-foreground); }
.cal-day.today .d { background: var(--spark); color: #1C2128; border-radius: 999px; }
.cal-day.drop { background: var(--accent); }
.chip { display: block; font-size: .75rem; border-left: 3px solid; padding: .125rem .375rem; margin-top: .25rem; border-radius: 3px; background: var(--card); cursor: grab; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip:active { cursor: grabbing; }
.cal-day.week { min-height: 28rem; }
.chip.chip-lg { white-space: normal; padding: .375rem .5rem; margin-top: .375rem; }

/* Tailwind Play's unlayered `*{--tw-translate-x:0}` reset overrides Basecoat's layered
   sidebar transform, so set the hidden-state translate directly (unlayered). */
.sidebar:not([data-side])[aria-hidden=true] > nav,
.sidebar[data-side=left][aria-hidden=true] > nav { translate: -100% 0; }
.sidebar[data-side=right][aria-hidden=true] > nav { translate: 100% 0; }

/* misc */
.textarea, .input:not([type=checkbox]):not([type=radio]), .select { width: 100%; }
.form .hint { font-size: .75rem; color: var(--muted-foreground); margin-top: .25rem; }
.num { font-variant-numeric: tabular-nums; }
.prose-sm p { margin: .5rem 0; }
.stat-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat-grid > div { background: var(--card); padding: 1.25rem; }