/* Direction: groomer's ledger — warm paper, lagoon teal, a friendly grotesque */
/* 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: #f7f3ec;
  --surface: #fffdf9;
  --surface-2: #ece6da;
  --border: #d5d3cd;
  --border-strong: #aeafaa;
  --ink: #1e2a2d;
  --muted: #53605e;
  --accent: #1d6b69;
  --accent-hover: #195b59;
  --accent-ink: #ffffff;
  --accent-text: #17595a;
  --accent-strong: #1d6b69;
  --accent-soft: #d9ebe7;
  --accent-border: #95b6b1;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dce5d7;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #efe0d1;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f0d9d3;
  --danger-strong: #b91c1c;
  --chart-1: #1d6b69;
  --chart-2: #387ac2;
  --chart-3: #65337f;
  --chart-4: #b04d5d;
  --chart-5: #694408;
  --chart-6: #56842b;

  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --x-band: #12373a;
  --x-on-photo: #ffffff;
  --x-bar: #f2b36b;
  --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: #040f0f;
  --surface: #1d2727;
  --surface-2: #111b1b;
  --border: #273131;
  --border-strong: #4f5757;
  --ink: #f7f3ec;
  --muted: #969894;
  --accent: #1d6b69;
  --accent-hover: #3f8180;
  --accent-ink: #ffffff;
  --accent-text: #5d9593;
  --accent-strong: #5d9593;
  --accent-soft: #0a2323;
  --accent-border: #0f3837;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #082819;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2b1e0e;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2c1212;
  --danger-strong: #d16969;
  --chart-1: #327d7a;
  --chart-2: #488dd6;
  --chart-3: #9a67b8;
  --chart-4: #c55f70;
  --chart-5: #ac721b;
  --chart-6: #69973d;
}

/* Ledger-paper dots behind the header and hero */
.ledger-paper {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  mask-image: none;
}

@keyframes bar-grow {
  from { transform: scaleX(0.15); }
  to { transform: scaleX(1); }
}
.bar-fill {
  transform-origin: left center;
  animation: bar-grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
html.reduced-motion .bar-fill {
  animation: none;
}