/* Clásico theme ("clean" in game/config.py): a modern, calm mobile look.
 *
 * Loaded on every page by ui/theme.py next to arcade.css. Every rule is scoped
 * under body.theme-clean (set by static/theme/arcade.js), so the pixel themes
 * are untouched. Clásico follows the phone's night mode: Quasar adds
 * .body--dark and the tokens switch to their dark values.
 *
 * What it changes: one indigo brand color and status colors that pass WCAG AA
 * with white text, the phone's own font, sentence-case flat buttons, rounded
 * cards with thin borders instead of shadows, a light header and the bottom
 * navigation (ui/layout.py), pills for the routine badges, and the Rutinas
 * section headers (ui/pages/home.py).
 *
 * Cascade notes (as in arcade.css): this file is unlayered, so its normal
 * declarations beat Quasar and Tailwind whatever their specificity, and a
 * Tailwind class can't undo a property set here. Quasar's color utilities
 * (.bg-primary, .text-primary...) are !important in a late layer, so the few
 * overrides of them sit in "@layer theme" at the end of this file.
 *
 * Contrast (WCAG AA) of every text/background pair used here is checked by
 * tests/test_theme.py against the tokens below; keep the two in step.
 */

/* --- tokens ------------------------------------------------------------------------ */

/* Roles: bg page and header, surface cards and fields, border card borders and
 * dividers, text body text, muted secondary text, primary filled buttons and
 * the current tab's pill (white text on it), primary-text the brand color as
 * text and icons, danger-text and success-text red and green text (Quasar's
 * own red and Tailwind's green-600 are too light on white), pill-* the pills'
 * background and text by tone. */
body.theme-clean {
  --gym-bg: #f5f6fa;
  --gym-surface: #ffffff;
  --gym-border: #e6e8ef;
  --gym-text: #1d2130;
  --gym-muted: #6b7084;
  --gym-primary: #4f46e5;
  --gym-primary-text: #4f46e5;
  --gym-danger-text: #b91c1c;
  --gym-success-text: #15803d;
  --gym-white: #ffffff;
  --gym-pill-neutral-bg: #eef0f5;
  --gym-pill-neutral: #4b5064;
  --gym-pill-info-bg: #e0e7ff;
  --gym-pill-info: #3730a3;
  --gym-pill-success-bg: #dcfce7;
  --gym-pill-success: #166534;
  --gym-radius: 16px;

  background: var(--gym-bg);
  color: var(--gym-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent; /* no grey flash on tap */
}

/* Night mode: the same roles on dark surfaces. Indigo, red and green text
 * would be too dark on them, so text gets light tints (fills keep their color). */
body.theme-clean.body--dark {
  --gym-bg: #111318;
  --gym-surface: #1b1e26;
  --gym-border: #2c303b;
  --gym-text: #e8eaf0;
  --gym-muted: #a0a6b6;
  --gym-primary-text: #a5b4fc;
  --gym-danger-text: #f87171;
  --gym-success-text: #4ade80;
  --gym-pill-neutral-bg: #2a2e39;
  --gym-pill-neutral: #c9cdd8;
  --gym-pill-info-bg: #2e2b5c;
  --gym-pill-info: #c7d2fe;
  --gym-pill-success-bg: #143524;
  --gym-pill-success: #86efac;
}

/* Quasar's brand colors. NiceGUI sets them inline on <body>, so they are
 * redefined on its children (the app, and the menus, dialogs and toasts
 * Quasar adds next to it). Every fill takes white text at 4.5:1 or more. */
body.theme-clean > * {
  --q-primary: #4f46e5;
  --q-secondary: #0f766e;
  --q-accent: #7c3aed;
  --q-positive: #15803d;
  --q-negative: #dc2626;
  --q-info: #0369a1;
  --q-warning: #b45309;
}
body.theme-clean.body--dark > * {
  --q-dark: #1b1e26;
  --q-dark-page: #111318;
}

/* --- type ---------------------------------------------------------------------------- */

/* One muted gray instead of Tailwind's scale of grays (gray-400 on white is
 * only 2.5:1). */
body.theme-clean :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--gym-text); }
body.theme-clean :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: var(--gym-muted); }
body.theme-clean .text-blue-600 { color: var(--gym-primary-text); }
body.theme-clean .text-green-600 { color: var(--gym-success-text); }
body.theme-clean :is(.text-red-500, .text-red-600) { color: var(--gym-danger-text); }

body.theme-clean .text-2xl.font-bold { letter-spacing: -0.01em; }

/* --- shape: cards, dialogs, menus, separators ----------------------------------------- */

body.theme-clean .q-card {
  border-radius: var(--gym-radius);
  border: 1px solid var(--gym-border);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); /* barely there */
}
/* A card that folds open (a routine): its header's tap highlight follows the corners. */
body.theme-clean .q-card:has(> .q-expansion-item) {
  overflow: hidden;
}
body.theme-clean .q-dialog .q-card {
  border: 0;
  border-radius: 24px;
}
body.theme-clean .q-menu {
  min-width: 220px;
  border-radius: 12px;
  border: 1px solid var(--gym-border);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
}
body.theme-clean .q-separator {
  background: var(--gym-border);
}

/* --- buttons ------------------------------------------------------------------------- */

/* Sentence case instead of ALL CAPS, and flat: no shadow under buttons. */
body.theme-clean .q-btn {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
/* Round buttons stay round; a group (kg | lb) rounds as a whole. */
body.theme-clean .q-btn:not(:where(.q-btn--round, .q-btn--fab, .q-btn-group > .q-btn)) {
  border-radius: 12px;
}
body.theme-clean .q-btn-group {
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid var(--gym-border);
}
body.theme-clean .q-btn--standard::before {
  box-shadow: none;
}
/* Outlined buttons: a thin neutral border, the color stays in the label. */
body.theme-clean .q-btn--outline::before {
  border-color: var(--gym-border);
}
body.theme-clean .q-btn--fab {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--q-primary) 40%, transparent);
}

/* --- form fields ---------------------------------------------------------------------- */

body.theme-clean .q-field--outlined .q-field__control {
  border-radius: 12px;
  background: var(--gym-surface);
}
body.theme-clean .q-field--outlined:not(.q-field--highlighted) .q-field__control::before {
  border-color: var(--gym-border); /* softer outline until focused */
}

/* --- pills: badges marked .pill (ui/components/routine_card.py) ----------------------- */

/* A light tint with dark text, readable where white on a light color is not. */
body.theme-clean .q-badge.pill {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

/* --- header (ui/layout.py) ------------------------------------------------------------ */

/* The page's color, slightly see-through and blurred, with dark text: calmer
 * than a solid colored bar. Padded for the notch in the installed app. */
body.theme-clean .gym-header {
  background: color-mix(in srgb, var(--gym-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--gym-text);
  border-bottom: 1px solid var(--gym-border);
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
}
body.theme-clean .gym-brand .q-icon {
  color: var(--gym-primary-text);
}
body.theme-clean .gym-avatar {
  font-weight: 700;
}

/* --- bottom navigation (ui/layout.py) ------------------------------------------------- */

/* Each tab is a link; the current one gets a pill behind its icon (Material 3). */
body.theme-clean .gym-nav {
  background: color-mix(in srgb, var(--gym-surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--gym-muted);
  border-top: 1px solid var(--gym-border);
  padding: 0 0 env(safe-area-inset-bottom);
}
body.theme-clean .gym-nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 10px;
  color: var(--gym-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
body.theme-clean .gym-nav__icon {
  width: 60px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
body.theme-clean .gym-nav__item--active {
  color: var(--gym-primary-text);
  font-weight: 600;
}
body.theme-clean .gym-nav__item--active .gym-nav__icon {
  background: color-mix(in srgb, var(--gym-primary) 14%, transparent);
}
body.theme-clean.body--dark .gym-nav__item--active .gym-nav__icon {
  background: color-mix(in srgb, var(--gym-primary-text) 18%, transparent);
}
/* The install banner (ui/pwa.py) sits above the navigation, not over it. */
body.theme-clean:has(.gym-nav) #gym-install {
  bottom: calc(76px + env(safe-area-inset-bottom));
}

/* --- Rutinas: the foldable section headers (ui/pages/home.py) ------------------------- */

/* A row on a surface, like a card, with its icon on a tinted tile. */
body.theme-clean .q-btn.routine-section {
  font-weight: 400;
  background: var(--gym-surface);
  border: 1px solid var(--gym-border);
  border-radius: var(--gym-radius);
  padding: 10px 12px;
}
body.theme-clean .routine-section .text-lg {
  font-size: 17px;
}
body.theme-clean .routine-section__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 22px;
  color: var(--gym-primary-text);
  background: color-mix(in srgb, var(--gym-primary) 12%, transparent);
}

/* --- reduced motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.theme-clean .gym-nav__icon {
    transition: none;
  }
}

/* --- sign-up wizard ------------------------------------------------------------------ */

/* Choice chips (ui/components/pixel.py ChoiceChips): long labels wrap instead
 * of being cut. The mascot's speech bubble stays a plain helper line here. */
body.theme-clean .pixel-chip {
  height: auto;
  min-height: 36px;
}
body.theme-clean .pixel-chip .q-chip__content {
  white-space: normal;
}
body.theme-clean .pixel-chip .q-chip__icon {
  color: inherit; /* the check of a chosen chip: white like its text */
}

/* --- overrides of Quasar's !important color utilities (see the note at the top) ------- */

@layer theme {
  body.theme-clean.body--dark .text-primary {
    color: var(--gym-primary-text) !important;
  }
  /* Red: delete buttons and error text ("color=red" is Quasar's lighter red). */
  body.theme-clean :is(.text-red, .text-negative) {
    color: var(--gym-danger-text) !important;
  }
  body.theme-clean .bg-red {
    background: var(--q-negative) !important;
  }
  body.theme-clean.body--dark .text-positive {
    color: var(--gym-success-text) !important;
  }
  body.theme-clean .q-badge.pill {
    background: var(--gym-pill-neutral-bg) !important;
    color: var(--gym-pill-neutral) !important;
  }
  body.theme-clean .q-badge.pill.bg-primary {
    background: var(--gym-pill-info-bg) !important;
    color: var(--gym-pill-info) !important;
  }
  body.theme-clean .q-badge.pill.bg-positive {
    background: var(--gym-pill-success-bg) !important;
    color: var(--gym-pill-success) !important;
  }
}