/* Direction: creative-studio — warm ivory paper, deep plum, vibrant coral, apricot and lavender accents */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbf6ef;
  --surface: #fffdfa;
  --surface-2: #fdeee9;
  --border: #eadfdc;
  --border-strong: #b4aeac;
  --ink: #2b2230;
  --muted: #6b6270;
  --accent: #5a2a6e;
  --accent-hover: #4d245e;
  --accent-ink: #ffffff;
  --accent-text: #5a2a6e;
  --accent-strong: #5a2a6e;
  --accent-soft: #efe5f5;
  --accent-border: #b39ab5;
  --success: #1f7a4d;
  --success-ink: #ffffff;
  --success-soft: #e1e7dc;
  --success-strong: #1d7047;
  --warning: #9a5a0c;
  --warning-ink: #ffffff;
  --warning-soft: #efe3d4;
  --warning-strong: #8e530b;
  --danger: #b3341f;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfd6;
  --danger-strong: #b3341f;
  --chart-1: #5a2a6e;
  --chart-2: #963544;
  --chart-3: #684506;
  --chart-4: #106736;
  --chart-5: #0e5470;
  --chart-6: #2e6ab2;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgba(60, 30, 70, 0.05), 0 10px 28px -14px rgba(90, 42, 110, 0.22);
  --card-pad: 1.25rem;
  --x-coral: #ee6a55;
  --x-apricot: #f7b98a;
  --x-lav: #b99ad6;
  --x-plum: #5a2a6e;
  --x-teal: #4f9d92;
  --x-gold: #e3a93b;
  --x-side: #35193f;
  --x-on-side: #f8eef3;
  --x-side-muted: #cdb6d6;
  --x-ok: #17653e;
  --x-ok-bg: #d9f1e3;
  --x-warn: #7d4707;
  --x-warn-bg: #fde5c4;
  --x-bad: #a02a17;
  --x-bad-bg: #fcdcd5;
  --x-bad-dk: #ff9d8a;
  --x-info: #46246a;
  --x-info-bg: #e6dbf3;
  --x-hot: #8a2a1a;
  --x-hot-bg: #ffd2c6;
  --x-neutral: #453d4a;
  --x-neutral-bg: #e9e4eb;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0d060f;
  --surface: #251f27;
  --surface-2: #19121b;
  --border: #2f2931;
  --border-strong: #565157;
  --ink: #fbf6ef;
  --muted: #9c9695;
  --accent: #5a2a6e;
  --accent-hover: #734a84;
  --accent-ink: #ffffff;
  --accent-text: #9b7da8;
  --accent-strong: #9b7da8;
  --accent-soft: #1e0e24;
  --accent-border: #30163a;
  --success: #1f7a4d;
  --success-ink: #ffffff;
  --success-soft: #11201d;
  --success-strong: #509874;
  --warning: #9a5a0c;
  --warning-ink: #ffffff;
  --warning-soft: #2c180e;
  --warning-strong: #b07e41;
  --danger: #b3341f;
  --danger-ink: #ffffff;
  --danger-soft: #321013;
  --danger-strong: #c96e5e;
  --chart-1: #89589f;
  --chart-2: #cc6671;
  --chart-3: #aa7417;
  --chart-4: #61953f;
  --chart-5: #1490a4;
  --chart-6: #6d80d5;
}

/* CreateSpace — studio-specific styling, tokens only */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; line-height: 1.25rem; }
.pill-ok { background: var(--x-ok-bg); color: var(--x-ok); }
.pill-warn { background: var(--x-warn-bg); color: var(--x-warn); }
.pill-bad { background: var(--x-bad-bg); color: var(--x-bad); }
.pill-info { background: var(--x-info-bg); color: var(--x-info); }
.pill-hot { background: var(--x-hot-bg); color: var(--x-hot); }
.pill-neutral { background: var(--x-neutral-bg); color: var(--x-neutral); }

.side-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border-radius: 14px; color: var(--x-side-muted); font-weight: 500; transition: background .15s, color .15s, transform .15s; }
.side-link:hover { background: rgba(255, 255, 255, .08); color: var(--x-on-side); }
.side-link:active { transform: scale(.98); }
.side-link[aria-current="page"] { background: var(--x-coral); color: var(--x-side); font-weight: 700; }
.side-link:focus-visible { outline: 2px solid var(--x-apricot); outline-offset: 2px; }

.stat-card { position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 90px; height: 90px; border-radius: 999px; background: var(--stat-tint, var(--x-lav)); opacity: .28; }

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .65rem .85rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: .75rem .85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }

.cover { background: linear-gradient(135deg, var(--x-plum), var(--x-coral)); }
.blob { position: absolute; border-radius: 999px; filter: blur(.5px); }

.col-bar { transition: height .5s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom; animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.h-bar { animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
html.reduced-motion .col-bar, html.reduced-motion .h-bar { animation: none; }

.cal-cell { min-height: 6.5rem; border: 1px solid var(--border); background: var(--surface); padding: .35rem; }
.cal-cell.is-out { background: var(--surface-2); opacity: .6; }
.cal-cell.is-today { outline: 2px solid var(--x-coral); outline-offset: -2px; }
.cal-ev { display: block; border-radius: 8px; padding: .15rem .4rem; font-size: .72rem; line-height: 1.2; margin-top: .25rem; background: var(--accent-soft); color: var(--accent-strong, var(--accent-text)); border-left: 3px solid var(--x-plum); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.ev-Ongoing { border-left-color: var(--x-coral); background: var(--x-hot-bg); color: var(--x-hot); }
.cal-ev.ev-Completed { border-left-color: var(--x-teal); background: var(--x-ok-bg); color: var(--x-ok); }
.cal-ev.ev-Cancelled { border-left-color: var(--x-bad); background: var(--x-bad-bg); color: var(--x-bad); text-decoration: line-through; }
.cal-ev.ev-Draft { border-left-color: var(--x-neutral); background: var(--x-neutral-bg); color: var(--x-neutral); }
.cal-ev.is-clash { box-shadow: 0 0 0 2px var(--x-coral); }

.glass { background: rgba(255, 255, 255, .1); }
.scrim { background: rgba(0, 0, 0, .5); }

.fade-in { animation: fadein .45s ease both; }
@keyframes fadein { from { transform: translateY(8px); } to { transform: none; } }
html.reduced-motion .fade-in { animation: none; }