/* Direction: GymFlow — chalk-white floor, iron-black bands, one signal-orange accent */
/* 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: #f6f4ef;
  --surface: #fbfaf8;
  --surface-2: #ebe8e3;
  --border: #d8d3ce;
  --border-strong: #b5aea8;
  --ink: #15171c;
  --muted: #666667;
  --accent: #d9430f;
  --accent-hover: #b8390d;
  --accent-ink: #ffffff;
  --accent-text: #b13209;
  --accent-strong: #a9340c;
  --accent-soft: #f2dbd0;
  --accent-border: #e9a48a;
  --success: #17794a;
  --success-ink: #ffffff;
  --success-soft: #dbe5db;
  --success-strong: #156f44;
  --warning: #a8620a;
  --warning-ink: #ffffff;
  --warning-soft: #ede2d4;
  --warning-strong: #8f5308;
  --danger: #b4231f;
  --danger-ink: #ffffff;
  --danger-soft: #eedbd6;
  --danger-strong: #b4231f;
  --chart-1: #d9430f;
  --chart-2: #a38b10;
  --chart-3: #127b4a;
  --chart-4: #1197b2;
  --chart-5: #4d4fd0;
  --chart-6: #d658bc;

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --x-band: #14161b;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #100502;
  --surface: #281e1b;
  --surface-2: #1c120f;
  --border: #312825;
  --border-strong: #58504e;
  --ink: #f6f4ef;
  --muted: #9a9490;
  --accent: #d9430f;
  --accent-hover: #df5f33;
  --accent-ink: #ffffff;
  --accent-text: #df6034;
  --accent-strong: #df6034;
  --accent-soft: #3c1305;
  --accent-border: #6a2108;
  --success: #17794a;
  --success-ink: #ffffff;
  --success-soft: #121f12;
  --success-strong: #4b9771;
  --warning: #a8620a;
  --warning-ink: #ffffff;
  --warning-soft: #311904;
  --warning-strong: #b57b30;
  --danger: #b4231f;
  --danger-ink: #ffffff;
  --danger-soft: #340c08;
  --danger-strong: #ca625e;
  --chart-1: #d9430f;
  --chart-2: #b39809;
  --chart-3: #14985c;
  --chart-4: #03a5c2;
  --chart-5: #666df1;
  --chart-6: #dd5ec2;
}

/* GymFlow — app-specific rules */
@keyframes gf-rise { from { transform: translateY(14px); } to { transform: none; } }
.gf-rise { animation: gf-rise .6s cubic-bezier(.2,.7,.2,1) both; }
html.reduced-motion .gf-rise { animation: none; }

.gf-band { background: var(--x-band); color: var(--x-on-photo); }
.gf-stripes {
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / .04) 14px 28px);
}
.gf-nav a { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: 12px; font-weight: 600; font-size: .92rem; }
.gf-nav a:hover { background: var(--surface-2); }
.gf-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.gf-tab { display: inline-flex; padding: .55rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.gf-tab:hover { background: var(--surface-2); }
.gf-tab[aria-current="page"] { background: var(--ink); color: var(--canvas); }
.gf-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gf-table th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .65rem .75rem; white-space: nowrap; }
.gf-table td { padding: .7rem .75rem; border-top: 1px solid var(--border); vertical-align: middle; }
.gf-table tbody tr:hover { background: var(--surface-2); }
.gf-scroll { overflow-x: auto; }
.gf-big-input { font-size: 1.35rem; padding: 1.1rem 1.2rem; }
.gf-photo { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; background: var(--surface-2); flex: none; }
.gf-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.gf-pill-active { background: var(--success-soft); color: var(--success-strong); }
.gf-pill-expiring { background: var(--warning-soft); color: var(--warning-strong); }
.gf-pill-expired { background: var(--danger-soft); color: var(--danger-strong); }
.gf-pill-none { background: var(--surface-2); color: var(--muted); }
.gf-step { border: 1px solid color-mix(in srgb, var(--x-on-photo) 22%, transparent); }
.htmx-request.gf-spin { opacity: .6; }