/*
 * theme.css — Demo Gym. Brutalist / bold-geometric: hard edges, one loud
 * accent (a hot construction orange), near-black ground. Opens DARK.
 */

:root {
  color-scheme: dark;
  --canvas: #0e0e0e;
  --surface: #262626;
  --surface-2: #1a1a1a;
  --border: color-mix(in srgb, #f2f0ec 16%, transparent);
  --border-strong: color-mix(in srgb, #f2f0ec 38%, transparent);
  --ink: #f2f0ec;
  --muted: #979693;

  --accent: #ff6a1a;
  --accent-hover: #ff8438;
  --accent-ink: #140f0a;
  --accent-text: #ff6a1a;
  --accent-strong: #ff6a1a;
  --accent-soft: #2a1a10;
  --accent-border: color-mix(in srgb, #ff6a1a 55%, transparent);

  --success: #3ea564;
  --success-ink: #0a1a10;
  --success-soft: #14261a;
  --success-strong: #6fce93;

  --warning: #e0a530;
  --warning-ink: #1a1206;
  --warning-soft: #2c2210;
  --warning-strong: #f0c168;

  --danger: #e5473a;
  --danger-ink: #1a0a08;
  --danger-soft: #2c1512;
  --danger-strong: #ff8a7d;

  --chart-1: #ff6a1a;
  --chart-2: #e0a530;
  --chart-3: #979693;
  --chart-4: #6fce93;
  --chart-5: #4d8ec9;
  --chart-6: #cb70a4;

  --font-display: "Archivo Black", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.16em;

  --radius-btn: 999px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: none;
  --shadow-raised: 10px 10px 0 0 var(--ink);
  --shadow-btn: 5px 5px 0 0 var(--ink);
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.1em;
  --btn-weight: 800;
  --measure: 62ch;

  --x-shadow-hard: 14px 14px 0 0 var(--ink);
  --x-shadow-hard-sm: 8px 8px 0 0 var(--ink);
  --x-rule: var(--ink);
  --x-band-dark: #141414;

  /* A photograph's own darkness never changes with the mode switch, so text
     laid over one is fixed light regardless of --ink's current value. */
  --x-photo-ink: #f5f3ef;
  --x-photo-ink-soft: color-mix(in srgb, #f5f3ef 85%, transparent);
  --x-photo-ink-contrast: #14110d;
  --x-photo-accent: #ff8a3d;
  --x-photo-muted: #b6b2ab;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3f1ec;
  --surface: #ffffff;
  --surface-2: #e9e6de;
  --border: color-mix(in srgb, #14110d 14%, transparent);
  --border-strong: color-mix(in srgb, #14110d 34%, transparent);
  --ink: #14110d;
  --muted: #625f58;

  --accent: #ff6a1a;
  --accent-hover: #e85c12;
  --accent-ink: #140f0a;
  --accent-text: #9c3a0a;
  --accent-strong: #9c3a0a;
  --accent-soft: #ffe3d0;
  --accent-border: color-mix(in srgb, #ff6a1a 55%, transparent);

  --success: #1f7a43;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #17632f;

  --warning: #9a6100;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6cc;
  --warning-strong: #7a4d00;

  --danger: #b8271c;
  --danger-ink: #ffffff;
  --danger-soft: #f4dcd9;
  --danger-strong: #921f16;

  --chart-1: #b8460d;
  --chart-2: #9a6100;
  --chart-3: #625f58;
  --chart-4: #17632f;
  --chart-5: #2a5f8a;
  --chart-6: #8a3f66;

  --x-shadow-hard: 14px 14px 0 0 var(--ink);
  --x-shadow-hard-sm: 8px 8px 0 0 var(--ink);
  --x-rule: var(--ink);
  --x-band-dark: #14110d;

  --x-photo-ink: #f5f3ef;
  --x-photo-ink-soft: color-mix(in srgb, #f5f3ef 85%, transparent);
  --x-photo-ink-contrast: #14110d;
  --x-photo-accent: #ff8a3d;
  --x-photo-muted: #b6b2ab;
}

/*
 * app.css — Demo Gym's own stylesheet. What no primitive and no utility
 * covers: the nav link and drawer, the fixed-light "over a photograph" set
 * (a photo's own darkness never flips with the theme switch), the hard
 * offset shadow and the ground. Tokens only — see public/theme.css.
 */

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce), (update: none) {
  html { scroll-behavior: auto; }
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- Text/border set for anything laid over the app's own photographs.
   A photograph does not get lighter when a visitor flips to light mode, so
   copy over one is pinned to these instead of --ink / --accent-text. ---- */
@utility text-photo-ink {
  color: var(--x-photo-ink);
}
@utility text-photo-ink-soft {
  color: var(--x-photo-ink-soft);
}
@utility text-photo-ink-contrast {
  color: var(--x-photo-ink-contrast);
}
@utility text-photo-accent {
  color: var(--x-photo-accent);
}
@utility text-photo-muted {
  color: var(--x-photo-muted);
}
@utility border-photo-ink {
  border-color: var(--x-photo-ink);
}
@utility bg-photo-ink {
  background-color: var(--x-photo-ink);
}

/* ---- The bar's own link: a hard underline that snaps in, not slides.
   The bar is a fixed dark band in both modes (see .navbar-band below), so
   its own text is pinned to the fixed light/accent pair, never the theme's
   ink/accent-text (which would go dark-on-dark the moment light mode
   flips ink). ---- */
.nav-link {
  @apply relative block px-2 py-3 text-sm font-bold no-underline lg:px-0 lg:py-0;
  color: var(--x-photo-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-link::after {
  content: "";
  @apply absolute inset-x-2 -bottom-0.5 h-[3px] scale-x-0 bg-accent transition-transform duration-150 lg:inset-x-0;
  transform-origin: left;
}
.nav-link:hover {
  @apply no-underline;
  color: var(--x-photo-accent);
}
.nav-link:hover::after {
  transform: scaleX(1);
}
.nav-link[aria-current="page"] {
  color: var(--x-photo-accent);
}
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* The drawer is a plain block panel in normal flow — no blur, no float,
   the page owns the top edge exactly like the rest of the bar. */
.drawer a {
  @apply border-b border-border;
}
.drawer a:last-child {
  @apply border-b-0;
}
@media (min-width: 64rem) {
  .drawer a {
    border-bottom: 0;
  }
}

/* ---- Ground: a faint, fixed grain over the canvas so large flat bands
   never read as plain digital black. Decorative only, never intercepts
   clicks. ---- */
body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Reduced motion: kill the one moving thing outright (belt and braces —
   app.js already renders the resting value in this case). */
html.reduced-motion [data-count-to] {
  transition: none !important;
}