/* Direction: pastel coaching studio — baby-pink paper, soft lavender insets, rounded Nunito, plum ink */
/* 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: #fff8fa;
  --surface: #ffffff;
  --surface-2: #f7f2fc;
  --border: #f1dfe7;
  --border-strong: #bbb0b4;
  --ink: #3a2e45;
  --muted: #655a70;
  --accent: #cf3a76;
  --accent-hover: #b03164;
  --accent-ink: #ffffff;
  --accent-text: #b4235f;
  --accent-strong: #a61e55;
  --accent-soft: #ffe3ec;
  --accent-border: #e9a3bf;
  --success: #2b7bbf;
  --success-ink: #ffffff;
  --success-soft: #e6e9f3;
  --success-strong: #2568a2;
  --warning: #b07400;
  --warning-ink: #ffffff;
  --warning-soft: #f6e8dc;
  --warning-strong: #895a00;
  --danger: #d0305a;
  --danger-ink: #ffffff;
  --danger-soft: #f9e0e7;
  --danger-strong: #bf2c53;
  --chart-1: #cf3a76;
  --chart-2: #d07811;
  --chart-3: #5c6e0d;
  --chart-4: #249f8e;
  --chart-5: #156898;
  --chart-6: #a872f5;

  --font-display: "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 8px 24px rgba(120, 80, 140, 0.08);
  --card-pad: 1.25rem;
  --x-text: #3a2e45;
  --x-pink: #ffe1ea;
  --x-pink-strong: #f7aac4;
  --x-yellow: #fff3c4;
  --x-yellow-strong: #fbd76a;
  --x-blue: #dcedff;
  --x-blue-strong: #a9d2f7;
  --x-lav: #ebe3fb;
  --x-lav-strong: #cbbaf2;
  --x-peach: #ffe5d2;
  --x-peach-strong: #f8c19c;
  --x-gray: #f2f0f5;
  --x-skin: #ffd9bf;
  --x-hair: #7a5242;
  --x-white: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #15060c;
  --surface: #2c1f24;
  --surface-2: #211218;
  --border: #36292e;
  --border-strong: #5b5155;
  --ink: #fff8fa;
  --muted: #a1979b;
  --accent: #cf3a76;
  --accent-hover: #d6588b;
  --accent-ink: #ffffff;
  --accent-text: #da6594;
  --accent-strong: #da6594;
  --accent-soft: #3e1123;
  --accent-border: #691d3c;
  --success: #2b7bbf;
  --success-ink: #ffffff;
  --success-soft: #1a2033;
  --success-strong: #4c90c9;
  --warning: #b07400;
  --warning-ink: #ffffff;
  --warning-soft: #371e09;
  --warning-strong: #bc8927;
  --danger: #d0305a;
  --danger-ink: #ffffff;
  --danger-soft: #3e0f1d;
  --danger-strong: #da5e7e;
  --chart-1: #cf3a76;
  --chart-2: #d77e1d;
  --chart-3: #758b15;
  --chart-4: #13a794;
  --chart-5: #0a88c9;
  --chart-6: #a872f5;
}

/* ---- illustration colours (read by the inline SVG sprite) ---- */
.art { display: block; height: auto; max-width: 100%; }
.f-pink { fill: var(--x-pink); }
.f-pink2 { fill: var(--x-pink-strong); }
.f-yellow { fill: var(--x-yellow); }
.f-yellow2 { fill: var(--x-yellow-strong); }
.f-blue { fill: var(--x-blue); }
.f-blue2 { fill: var(--x-blue-strong); }
.f-lav { fill: var(--x-lav); }
.f-lav2 { fill: var(--x-lav-strong); }
.f-peach { fill: var(--x-peach); }
.f-peach2 { fill: var(--x-peach-strong); }
.f-white { fill: var(--x-white); }
.f-skin { fill: var(--x-skin); }
.f-hair { fill: var(--x-hair); }
.f-ink { fill: var(--x-text); }
.s-ink { stroke: var(--x-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- soft pastel backdrop ---- */
html:not([data-theme="dark"]) body {
  background-image:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--x-pink) 55%, transparent), transparent 38%),
    radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--x-lav) 55%, transparent), transparent 34%);
  background-repeat: no-repeat;
}

/* ---- dashboard tiles ---- */
.tile {
  color: var(--x-text);
  border-radius: 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
button.tile:active { transform: scale(0.98); }
button.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sc-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.sc-panel:not([hidden]) { animation: sc-rise 0.22s ease-out; }
@keyframes sc-rise {
  from { transform: translateY(6px); }
  to { transform: none; }
}

/* ---- calendar ---- */
.cal-cell.is-sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.cal-today { background: var(--accent-soft); }

/* entry form: show only the fields that fit the chosen type */
.cal-form[data-kind="class"] .for-off,
.cal-form[data-kind="leave"] .for-class,
.cal-form[data-kind="leave"] .for-sub,
.cal-form[data-kind="cancelled"] .for-class {
  display: none;
}

html.reduced-motion .sc-panel:not([hidden]),
html.reduced-motion .tile { animation: none; transition: none; }