/* ============================================================
   KINETIC · THEME.CSS — Brand Design System (single source of truth)
   ------------------------------------------------------------
   Version 1.0 · July 2026
   Pure CSS, zero dependencies. Import this file first,
   before any site-specific CSS (site.css).
   This is the SAME token/component system the PWA uses:
   the website derives every color, font and shape from here.

   Index:
   01. Tokens (design variables)
   02. Dark mode (optional, attribute-based)
   03. Fonts & base
   04. Typography
   05. Buttons
   06. Badges & chips
   07. Cards
   08. Forms
   09. Bottom navigation (PWA) & app bar
   10. Calendar / booking slots
   11. States: loading (skeleton), empty, toast
   12. PWA rules (standalone, safe areas, touch)
   13. Accessibility & motion
   14. Utilities
   ============================================================ */


/* ============================================================
   01 · TOKENS — the single source of truth
   Never use a raw hex in the app: always use the variable.
   ============================================================ */
:root {
  /* Form controls, scrollbars and the UA canvas follow the token set */
  color-scheme: light;

  /* ---- Brand colors ---- */
  --c-ink:    #12251C;   /* text & structure (greenish black, never #000) */
  --c-ceiba:  #1E5B44;   /* primary: trust. Buttons and links */
  --c-leaf:   #DCE9DF;   /* soft surfaces, success, badges */
  --c-mango:  #FFB020;   /* action/energy. Max ~8% of any screen */
  --c-mist:   #F3F6F2;   /* app base background */
  --c-river:  #33658A;   /* informational: notifications, "online" */
  --c-white:  #FFFFFF;

  /* ---- Functional colors (derived — don't invent new ones) ---- */
  --c-error:       #A33B2E;
  --c-error-soft:  #F6E3E0;
  --c-success:     var(--c-ceiba);
  --c-success-soft: var(--c-leaf);
  --c-info:        var(--c-river);
  --c-info-soft:   #E1EAF2;

  /* ---- Text ---- */
  --text:           var(--c-ink);
  --text-secondary: #4A5F53;   /* metadata, helper text */
  --text-inverted:  var(--c-mist);
  --text-on-mango:  var(--c-ink);  /* on mango ALWAYS ink, never white */

  /* ---- Surfaces ---- */
  --bg:            var(--c-mist);
  --surface:       var(--c-white);   /* cards, sheets, elevated inputs */
  --surface-2:     var(--c-leaf);    /* soft highlights */
  --border:        var(--c-ink);     /* the firm border is part of the brand */
  --border-soft:   rgba(18, 37, 28, 0.15);

  /* ---- Typography ---- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-ui:      'Archivo', system-ui, sans-serif;   /* buttons, labels, nav */
  --font-body:    'Asap', system-ui, sans-serif;

  --size-display: clamp(30px, 8vw, 40px);
  --size-h1: 26px;
  --size-h2: 21px;
  --size-h3: 18px;
  --size-body: 16px;      /* never below 16 on inputs (prevents iOS zoom) */
  --size-secondary: 14px;
  --size-label: 13px;     /* absolute minimum of the system */

  /* ---- Spacing (scale of 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- Shape ---- */
  --radius-s: 8px;      /* chips, badges */
  --radius-m: 12px;     /* buttons, inputs */
  --radius-l: 18px;     /* cards */
  --radius-xl: 24px;    /* sheets, modals */
  --radius-pill: 999px;

  --border-w: 2.5px;        /* inputs, chips */
  --border-w-strong: 3px;   /* cards, buttons */

  /* ---- Shadows: hard and solid — NEVER generic blurry drop shadows ---- */
  --shadow-card:     5px 5px 0 var(--c-leaf);
  --shadow-button:   4px 4px 0 var(--c-ink);
  --shadow-floating: 6px 6px 0 rgba(18, 37, 28, 0.2);

  /* ---- Motion (transform/opacity only on mobile) ---- */
  --dur-fast: 120ms;
  --dur-normal: 220ms;
  --dur-slow: 350ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* soft exit, firm entry */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layers ---- */
  --z-nav: 50;
  --z-sheet: 60;
  --z-toast: 70;

  /* ---- Touch ---- */
  --touch-min: 44px;   /* minimum hit area for every interactive element */

  /* ---- Safe areas (installed PWA) ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ============================================================
   02 · DARK MODE (optional)
   Enable with <html data-theme="dark"> or automatically below.
   The brand stays the brand: mango and ceiba never change roles.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C1A13;
  --surface: #14261D;
  --surface-2: #1B3327;
  --text: #EAF2EC;
  --text-secondary: #9DBBA9;
  --border: #EAF2EC;
  --border-soft: rgba(234, 242, 236, 0.18);
  --shadow-card: 5px 5px 0 rgba(0, 0, 0, 0.45);
  --shadow-button: 4px 4px 0 rgba(0, 0, 0, 0.55);
  --c-leaf: #244534;          /* leaf darkens as a surface */
  --c-success-soft: #244534;
  --c-info-soft: #17293A;
}

/* System-based automatic (delete if you prefer manual only) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C1A13;
    --surface: #14261D;
    --surface-2: #1B3327;
    --text: #EAF2EC;
    --text-secondary: #9DBBA9;
    --border: #EAF2EC;
    --border-soft: rgba(234, 242, 236, 0.18);
    --shadow-card: 5px 5px 0 rgba(0, 0, 0, 0.45);
    --shadow-button: 4px 4px 0 rgba(0, 0, 0, 0.55);
    --c-leaf: #244534;
    --c-success-soft: #244534;
  }
}


/* ============================================================
   03 · FONTS & BASE
   Fonts are loaded with <link rel="preconnect"> + <link> in each
   page's <head> for best performance (no CSS @import round-trip).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* PWA: prevents the white scroll bounce and accidental pull-to-refresh */
  overscroll-behavior-y: none;
}

img { display: block; max-width: 100%; }

/* Removes the gray/blue tap flash on Android/iOS: feedback comes
   from our own :active states */
a, button { -webkit-tap-highlight-color: transparent; }


/* ============================================================
   04 · TYPOGRAPHY
   Display = Archivo Black, headlines only. UI = Archivo.
   Body = Asap. Never mix roles.
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.t-display .accent { color: var(--c-mango); }

.t-h1 { font-family: var(--font-ui); font-weight: 700; font-size: var(--size-h1); line-height: 1.15; margin: 0; }
.t-h2 { font-family: var(--font-ui); font-weight: 700; font-size: var(--size-h2); line-height: 1.2; margin: 0; }
.t-h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--size-h3); line-height: 1.25; margin: 0; }

.t-body { font-size: var(--size-body); margin: 0; }
.t-secondary { font-size: var(--size-secondary); color: var(--text-secondary); margin: 0; }
.t-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.04em;
}
.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ceiba);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Court tick: the signature element, precedes eyebrows */
.t-eyebrow::before {
  content: "";
  width: 30px; height: 9px;
  border-left: 4px solid var(--c-mango);
  border-bottom: 4px solid var(--c-mango);
}

/* Price: always UI bold + currency/period in secondary */
.t-price { font-family: var(--font-ui); font-weight: 700; font-size: 17px; }
.t-price small { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--text-secondary); }


/* ============================================================
   05 · BUTTONS
   Hierarchy: primary (ceiba) > accent (mango, conversion only)
   > secondary (outline) > ghost (text).
   One mango button per screen, maximum.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 12px 22px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--text-inverted);
  background: var(--c-ceiba);
  border: var(--border-w-strong) solid var(--c-ink);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
/* Touch feedback: the button "sinks" (transform, not color) */
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c-ink); }

.btn--mango { background: var(--c-mango); color: var(--text-on-mango); }
.btn--secondary { background: var(--surface); color: var(--text); }
.btn--ghost {
  background: transparent;
  color: var(--c-ceiba);
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--block { display: flex; width: 100%; }
.btn--small { min-height: 36px; padding: 8px 14px; font-size: 14px; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Loading state: add .is-loading class and aria-busy="true" */
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 3px solid currentColor;
  border-color: var(--text-inverted) transparent var(--text-inverted) var(--text-inverted);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn--mango.is-loading::after { border-color: var(--c-ink) transparent var(--c-ink) var(--c-ink); }
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   06 · BADGES & CHIPS
   The "Verified" badge is trust signal #1:
   it lives on the card, next to the name, always visible.
   ============================================================ */
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-success-soft);
  border: 2px solid var(--c-ceiba);
  color: var(--c-ceiba);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-verified::before { content: "✓"; font-size: 12px; }
[data-theme="dark"] .badge-verified { color: #9FD6BC; border-color: #9FD6BC; }

.badge-info {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-info-soft); border: 2px solid var(--c-info); color: var(--c-info);
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
}

/* Chips: filters and time slots. Interactive → full touch area */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--c-ink);
  color: var(--c-mango);
  border-color: var(--c-ink);
}
/* Highlighted slot (today / next availability) */
.chip--today { background: var(--c-mango); color: var(--text-on-mango); }


/* ============================================================
   07 · CARDS
   Firm border + hard shadow. The trainer photo is the hero:
   no heavy filters, just the legibility gradient.
   ============================================================ */
.card {
  background: var(--surface);
  border: var(--border-w-strong) solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* Trainer card (the single most important component in the app) */
.trainer-card__photo {
  aspect-ratio: 16 / 10;
  position: relative;
  background: var(--c-ceiba);   /* brand color while the image loads */
}
.trainer-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.trainer-card__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,37,28,0.35), transparent 55%);
}
.trainer-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
}
.trainer-card__stats {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
}
.trainer-card__stats .star { color: var(--c-ceiba); }
[data-theme="dark"] .trainer-card__stats .star { color: #9FD6BC; }

/* Pressable: the whole card as a button (wrap in <a> or <button>) */
.card--pressable { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.card--pressable:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c-leaf); }


/* ============================================================
   08 · FORMS
   16px minimum on inputs (prevents iOS auto-zoom).
   Focus in mango: visible, thick, unmistakable.
   ============================================================ */
.field { margin-bottom: var(--sp-4); }
.field__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--size-label);
  margin-bottom: var(--sp-2);
}
.field__input, .field__select, .field__textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-m);
  appearance: none;
}
.field__input::placeholder { color: var(--text-secondary); opacity: 0.8; }

.field__hint { font-size: 13px; color: var(--text-secondary); margin-top: var(--sp-1); }

/* Error: color + text, never color alone (accessibility) */
.field--error .field__input { border-color: var(--c-error); background: var(--c-error-soft); }
.field__error {
  display: flex; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--c-error);
  margin-top: var(--sp-1);
}
.field__error::before { content: "!"; font-weight: 800; }

/* Segmented control (I want to train / I'm a trainer) */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: var(--border-w-strong) solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.segmented button {
  min-height: var(--touch-min);
  padding: 10px 8px;
  background: var(--bg);
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-secondary);
}
.segmented button[aria-pressed="true"], .segmented button.is-active {
  background: var(--c-ink);
  color: var(--c-mango);
}


/* ============================================================
   09 · BOTTOM NAVIGATION (PWA) & APP BAR
   4–5 destinations max. Label always visible (never icon-only).
   ============================================================ */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: var(--border-w-strong) solid var(--border);
  padding-bottom: var(--safe-bottom);   /* respects the gesture bar */
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.bottom-nav__item .icon { width: 24px; height: 24px; }
.bottom-nav__item[aria-current="page"] {
  color: var(--c-ceiba);
  /* Active indicator: the court line, not a background fill */
  box-shadow: inset 0 4px 0 var(--c-mango);
}
[data-theme="dark"] .bottom-nav__item[aria-current="page"] { color: #9FD6BC; }

/* Give the content room so the nav never covers it */
.page-with-nav { padding-bottom: calc(72px + var(--safe-bottom)); }

/* Top app bar */
.app-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  padding-top: calc(var(--sp-2) + var(--safe-top));
  background: var(--bg);
  border-bottom: var(--border-w-strong) solid var(--border);
}
.app-bar__title { font-family: var(--font-ui); font-weight: 700; font-size: 17px; flex: 1; }
.app-bar__logo { font-family: var(--font-display); font-size: 20px; }
.app-bar__logo .dot { color: var(--c-mango); }


/* ============================================================
   10 · CALENDAR / BOOKING SLOTS
   The heart of the product: total clarity of availability.
   ============================================================ */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
}
.slot {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.slot:active { transform: scale(0.95); }
.slot[aria-pressed="true"], .slot.is-selected {
  background: var(--c-ceiba);
  color: var(--text-inverted);
  border-color: var(--c-ink);
}
.slot:disabled, .slot.is-taken {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}


/* ============================================================
   11 · STATES: LOADING, EMPTY, TOAST
   ============================================================ */

/* Skeleton: the app "sketches" its structure while loading.
   Always skeleton over a full-screen spinner. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-leaf);
  border-radius: var(--radius-s);
  color: transparent !important;
  pointer-events: none;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Empty state: always with an action, never a dead end.
   (Research rule: a bare "no results" kills the relationship.) */
.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
}
.empty-state .t-h3 { margin-bottom: var(--sp-2); }
.empty-state .t-secondary { margin-bottom: var(--sp-5); }

/* Toast: confirmations and errors, one line, dismisses itself */
.toast {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4);
  bottom: calc(80px + var(--safe-bottom));
  z-index: var(--z-toast);
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-inverted);
  background: var(--c-ink);
  border: var(--border-w-strong) solid var(--c-ink);
  border-left: 8px solid var(--c-mango);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-floating);
  animation: toast-in var(--dur-normal) var(--ease-bounce);
}
.toast--error { border-left-color: #E06A5A; }
@keyframes toast-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Offline banner (offline-first: say it clearly, don't break the app) */
.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  background: var(--c-ink);
  color: var(--c-mango);
}


/* ============================================================
   12 · PWA RULES
   ============================================================ */

/* When the app is installed (standalone), reinforce the native feel */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
  /* UI elements can't be selected as text */
  .btn, .chip, .slot, .bottom-nav, .app-bar { user-select: none; -webkit-user-select: none; }
}

/* Main content always inside lateral safe areas
   (curved screens / notch in landscape) */
.page {
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}

/* Reminder for manifest.json (not CSS, but it lives next to the theme):
   "background_color": "#12251C"  ← branded splash, not white
   "theme_color":      "#12251C"
   "display": "standalone"                                          */


/* ============================================================
   13 · ACCESSIBILITY & MOTION
   ============================================================ */

/* Focus ALWAYS visible: thick mango ring. Never remove it. */
:focus-visible {
  outline: 3px solid var(--c-mango);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Full respect for the reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   14 · UTILITIES (the bare minimum, not a framework)
   ============================================================ */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.center { text-align: center; }

.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }

.divider {
  border: none;
  border-top: var(--border-w) solid var(--border-soft);
  margin: var(--sp-5) 0;
}

/* Touch-friendly horizontal scroll (card carousels in the app,
   no GSAP: native scroll with snap) */
.carousel {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex-shrink: 0; width: min(78vw, 320px); }