/* Direction: Cherry Fit — soft blush paper, cherry-red accents, rounded and friendly */
/* 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: #fff6f5;
  --surface: #ffffff;
  --surface-2: #ffeceb;
  --border: #f6d5d3;
  --border-strong: #bcaead;
  --ink: #3a1418;
  --muted: #7d5258;
  --accent: #dc2626;
  --accent-hover: #bb2020;
  --accent-ink: #ffffff;
  --accent-text: #b91c1c;
  --accent-strong: #9f1818;
  --accent-soft: #ffe1df;
  --accent-border: #ef9898;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3e8df;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e2d9;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dcdb;
  --danger-strong: #b91c1c;
  --chart-1: #dc2626;
  --chart-2: #b08808;
  --chart-3: #0c772d;
  --chart-4: #1e9aa8;
  --chart-5: #2c4bd7;
  --chart-6: #d255d3;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --radius-card: 24px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 10px 26px -14px rgba(220, 38, 38, 0.35);
  --card-pad: 1.25rem;
  --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: #100303;
  --surface: #281c1c;
  --surface-2: #1c1010;
  --border: #312626;
  --border-strong: #584f4f;
  --ink: #fff6f5;
  --muted: #9f9594;
  --accent: #dc2626;
  --accent-hover: #e14747;
  --accent-ink: #ffffff;
  --accent-text: #e45656;
  --accent-strong: #e45656;
  --accent-soft: #3d0b0b;
  --accent-border: #6c1313;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #111f10;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #341504;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #350909;
  --danger-strong: #d16969;
  --chart-1: #dc2626;
  --chart-2: #b68e18;
  --chart-3: #1a9a3e;
  --chart-4: #05a1b1;
  --chart-5: #4871fe;
  --chart-6: #d255d3;
}

body {
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lift:hover { transform: translateY(-3px); }
.bar { transform-origin: bottom; animation: grow 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes grow { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
.logo-bob { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
html.reduced-motion .bar, html.reduced-motion .logo-bob { animation: none; }
html.reduced-motion .lift:hover { transform: none; }