/* Direction: Atelier — warm cold-press paper, rose madder, cerulean washes, a calligraphic serif */
/* 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: #fbf7f0;
  --surface: #fffdf9;
  --surface-2: #f0ebe5;
  --border: #dcd6d1;
  --border-strong: #b8b0ad;
  --ink: #2a2433;
  --muted: #6b656c;
  --accent: #c2476b;
  --accent-hover: #a53c5b;
  --accent-ink: #ffffff;
  --accent-text: #a8365a;
  --accent-strong: #a43c5a;
  --accent-soft: #f7dfe6;
  --accent-border: #e1a8b4;
  --success: #2f7d5b;
  --success-ink: #ffffff;
  --success-soft: #e3e8de;
  --success-strong: #2b7354;
  --warning: #b7791f;
  --warning-ink: #2a2433;
  --warning-soft: #f3e8d7;
  --warning-strong: #8f5e19;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3ddd7;
  --danger-strong: #b91c1c;
  --chart-1: #c2476b;
  --chart-2: #c47a1c;
  --chart-3: #516d02;
  --chart-4: #199c91;
  --chart-5: #14639b;
  --chart-6: #a873dd;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --x-wash-a: #8fc3dc;
  --x-wash-b: #f1a9bd;
  --x-wash-c: #f2d78c;
  --x-wash-d: #b7a6e0;
  --x-band: #262a45;
  --x-on-photo: #ffffff;
  --x-cover-ink: #2a2433;
  --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: #17090d;
  --surface: #2e2225;
  --surface-2: #231519;
  --border: #372b2f;
  --border-strong: #5d5356;
  --ink: #fbf7f0;
  --muted: #a09895;
  --accent: #c2476b;
  --accent-hover: #cb6381;
  --accent-ink: #ffffff;
  --accent-text: #cf708c;
  --accent-strong: #cf708c;
  --accent-soft: #3d1722;
  --accent-border: #642537;
  --success: #2f7d5b;
  --success-ink: #ffffff;
  --success-soft: #1c231e;
  --success-strong: #5d9a7f;
  --warning: #b7791f;
  --warning-ink: #ffffff;
  --warning-soft: #3a2211;
  --warning-strong: #bd8431;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b0d10;
  --danger-strong: #d16969;
  --chart-1: #c2476b;
  --chart-2: #cf7e07;
  --chart-3: #6b8f10;
  --chart-4: #25a297;
  --chart-5: #1486d1;
  --chart-6: #a873dd;
}

.paper {
  background-image:
    radial-gradient(700px 420px at 8% -5%, color-mix(in srgb, var(--x-wash-a) 28%, transparent), transparent 70%),
    radial-gradient(600px 380px at 100% 0%, color-mix(in srgb, var(--x-wash-b) 26%, transparent), transparent 70%),
    radial-gradient(500px 360px at 50% 100%, color-mix(in srgb, var(--x-wash-c) 20%, transparent), transparent 70%);
  background-repeat: no-repeat;
}
.blob {
  position: absolute; border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
  filter: blur(28px); opacity: .7; animation: drift 16s ease-in-out infinite alternate; pointer-events: none;
}
.blob-a { background: var(--x-wash-a); }
.blob-b { background: var(--x-wash-b); animation-delay: -5s; }
.blob-c { background: var(--x-wash-c); animation-delay: -9s; }
@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to { transform: translate(26px, -18px) rotate(14deg) scale(1.08); }
}
html.reduced-motion .blob { animation: none; }

.cover-0 { background: linear-gradient(135deg, var(--x-wash-a), var(--x-wash-d)); }
.cover-1 { background: linear-gradient(135deg, var(--x-wash-b), var(--x-wash-c)); }
.cover-2 { background: linear-gradient(135deg, var(--x-wash-c), var(--x-wash-a)); }
.cover-3 { background: linear-gradient(135deg, var(--x-wash-d), var(--x-wash-b)); }
.cover-0, .cover-1, .cover-2, .cover-3 { color: var(--x-cover-ink); }

.stroke {
  background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--x-wash-b) 75%, transparent) 62%, color-mix(in srgb, var(--x-wash-b) 75%, transparent) 92%, transparent 92%);
  padding: 0 .12em;
}
.tilt-l { transform: rotate(-2.5deg); }
.tilt-r { transform: rotate(2deg); }
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(42, 36, 51, .45); }
html.reduced-motion .lift:hover { transform: none; }
.band { background: var(--x-band); }
.cal-cell { min-height: 6.5rem; }