/* Gymi brand tokens, read from design_system/lib/tokens/app_colors.dart.
   This shared layer skins the private portal and its exported V6 comparator.
   Exercise images, pose colours, data and approval states are not retouched. */
:root {
  --gymi-primary: #0075c9;
  --gymi-action: #e9531d;
  --gymi-primary-dark: #2e5597;
  --gymi-navy: #0a3d68;
  --gymi-heading: #1d3a52;
  --gymi-text: #46627c;
  --gymi-rust: #b94a1e;
  --gymi-surface: #ffffff;
  --gymi-background: #f1f4f7;
  --gymi-border: #d3dbe3;
  --gymi-tint-blue: #eef6ff;
  --gymi-tint-active: #eef4fb;
  --gymi-tint-orange: #fff3ec;
  --gymi-hero: linear-gradient(135deg, #0a3d68, #0075c9 70%);
  --ink: var(--gymi-navy);
  --muted: var(--gymi-text);
  --line: var(--gymi-border);
  --bg: var(--gymi-background);
  --blue: var(--gymi-primary);
  --catalogue-accent: var(--gymi-primary);
  --catalogue-soft: var(--gymi-tint-blue);
  --catalogue-ink: var(--gymi-navy);
}

body { background: var(--gymi-background); color: var(--gymi-navy); }
a { color: var(--gymi-primary-dark); }
h1, h2, h3 { color: var(--gymi-navy); }
input, select, button, .button { border-color: var(--gymi-border); }
input::placeholder { color: var(--gymi-text); opacity: 1; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--gymi-primary);
  outline-offset: 3px;
}
button, .button { color: var(--gymi-navy); }
.primary, .button.primary {
  background: var(--gymi-primary);
  border-color: var(--gymi-primary);
  color: var(--gymi-surface);
}
.primary:hover, .button.primary:hover { background: #2e5597; border-color: #2e5597; }
.brand { color: var(--gymi-primary); }
.topbar { border-top: 3px solid var(--gymi-action); }
.tabs button[aria-selected="true"] {
  background: var(--gymi-tint-blue);
  border-color: var(--gymi-primary);
  color: var(--gymi-primary-dark);
}
.badge { background: var(--gymi-tint-blue); color: var(--gymi-navy); }
.invite { border-color: var(--gymi-action); background: var(--gymi-tint-orange); }

/* Catalogue home and individual exercise sheets. */
.catalogue-hero {
  background: var(--gymi-hero);
  border-color: var(--gymi-primary);
  border-left: 5px solid var(--gymi-action);
  color: var(--gymi-surface);
}
.catalogue-hero h1, .catalogue-hero .eyebrow, .hero-mark {
  color: var(--gymi-surface);
}
.catalogue-hero .hero-copy, .hero-mark span { color: var(--gymi-surface); }
.hero-mark { border-left-color: #ffffff40; }
.eyebrow { color: var(--gymi-rust); }
.catalogue-stats strong { color: var(--gymi-navy); }
.catalogue-stats div:first-child strong { color: var(--gymi-primary); }
.text-button, .card-footer strong { color: var(--gymi-primary); }
.back-link { color: var(--gymi-primary-dark); }
.exercise-card:hover { border-color: var(--gymi-primary); box-shadow: 0 8px 20px #0075c914; }
.exercise-icon, .exercise-icon.bodyweight {
  background: var(--gymi-tint-blue);
  color: var(--gymi-primary);
}
.exercise-icon.material { background: var(--gymi-tint-orange); color: var(--gymi-rust); }
.exercise-icon.machine { background: var(--gymi-tint-active); color: var(--gymi-navy); }
.tag { color: var(--gymi-text); background: var(--gymi-background); border-color: var(--gymi-border); }
.tag.pilot { color: var(--gymi-rust); background: var(--gymi-tint-orange); border-color: #e9531d40; }
.tag.neutral { color: var(--gymi-text); background: var(--gymi-surface); }
.card-number, .card-equipment, .card-equipment span, .card-footer { color: var(--gymi-text); }
.detail-tabs a[aria-selected="true"] { color: var(--gymi-primary-dark); border-bottom-color: var(--gymi-action); }
.execution-steps li > span { color: var(--gymi-primary-dark); background: var(--gymi-tint-blue); }
.empty-state, .empty-video { border-color: var(--gymi-border); }
.empty-video { background: var(--gymi-background); }
.empty-video > span { color: var(--gymi-primary); }
.notice { color: var(--gymi-rust); background: #fff8ec; border-color: #f0d9a0; }
.contract-details { color: var(--gymi-text); background: var(--gymi-tint-active); }
.viewer-heading { color: var(--gymi-navy); background: var(--gymi-tint-blue); }
.viewer-heading a { color: var(--gymi-primary-dark); }
.dose-table th { background: var(--gymi-background); }

/* The comparator is an isolated iframe with its original controls and data. */
body:not([data-page]) > header { background: var(--gymi-hero); border-top: 3px solid var(--gymi-action); }
body:not([data-page]) > header h1,
body:not([data-page]) > header .eyebrow { color: var(--gymi-surface); }
body:not([data-page]) > header .intro,
body:not([data-page]) > header .stat span,
body:not([data-page]) > header .status-line { color: var(--gymi-surface); }
body:not([data-page]) > header .stat { border-top-color: #ffffff40; }
.header-badge { background: #0a3d68; border-color: #ffffff66; color: white; }
.step { background: var(--gymi-tint-blue); color: var(--gymi-primary-dark); }
.exercise-list button:hover, .exercise-list button[aria-current="true"] { background: var(--gymi-tint-blue); }
.note.blue { background: var(--gymi-tint-blue); border-color: var(--gymi-border); }
.frame-readout { background: var(--gymi-tint-active); }
.chart text { fill: var(--gymi-text); }
input[type="range"] { accent-color: var(--gymi-primary); }

/* Semantic status colours remain distinct from brand navigation colours. */
.badge.amber { color: var(--gymi-rust); background: #fff3d2; }
.badge.mint { color: #135642; background: #e7f5ec; }
/* Same-origin exercise embedding: keep the comparison and its controls,
   while the catalogue owns the page heading and navigation. */
body.exercise-embed { overflow: hidden; }
body.exercise-embed > header, body.exercise-embed > .tabs,
body.exercise-embed main > section:not(#comparador), body.exercise-embed .footer { display: none !important; }
body.exercise-embed > main { max-width: none; padding: 0; display: flow-root; }
body.exercise-embed #comparador { display: block !important; }
@media (forced-colors: active) {
  .catalogue-hero, body:not([data-page]) > header { border: 1px solid CanvasText; }
}