/* Design tokens — Villa Ops (Claude Design handoff, session 15-16 juillet 2026).
   Source unique de style pour toutes les pages de public/app/ — cf.
   INTERFACE.md §7 Phase A. Ne pas dupliquer ces valeurs en dur dans les pages :
   toujours passer par les variables ci-dessous. */

:root {
  /* Brand */
  --color-secondary: #6E3A36; /* ancien style bouton primaire, cf. --color-btn-primary-* */
  --color-accent: #e5732a; /* petits accents : nav active, liens, sélection */
  --color-accent-hover: #c85e1f;
  --color-accent-tint: #fbf1e7;

  /* Bouton d'action principal — style à l'essai (26 juillet 2026, retour
     utilisateur) : fond blanc, texte et bordure oranges, plutôt que le fond
     chocolat/texte blanc d'origine. Un seul groupe de variables à changer
     pour revenir en arrière (décommenter le bloc "ancien style" ci-dessous,
     commenter celui du dessus) plutôt que de rechercher chaque bouton un par
     un dans public/app/index.html et new.js. */
  --color-btn-primary-bg: #fff;
  --color-btn-primary-fg: var(--color-accent);
  --color-btn-primary-border: var(--color-accent);
  /* Ancien style ("chocolate") :
  --color-btn-primary-bg: var(--color-secondary);
  --color-btn-primary-fg: #fff;
  --color-btn-primary-border: var(--color-secondary);
  */

  /* Neutrals — warm grey */
  --color-ink: #1a1a1a;
  --color-slate: #5f5c55;
  --color-muted: #8a877f;
  --color-faint: #a8a49a;
  --color-line: #e6e3dc;
  --color-canvas: #faf9f6;
  --color-field-border: #e2dfd7;
  --color-inset-fill: #f8f6f1;
  --color-note-tint: #f4efe4;

  /* Channels (booking origin) */
  --color-airbnb-dot: #d6a29b;
  --color-airbnb-bg: #f1ded9;
  --color-airbnb-fg: #8a4a42;
  --color-booking-dot: #7e9ab0;
  --color-booking-bg: #dfe8ee;
  --color-booking-fg: #3f5a6e;
  --color-direct-dot: #d7a24c;
  --color-direct-bg: #f3e6c8;
  --color-direct-fg: #846426;
  --color-complimentary-dot: #9dae86;
  --color-complimentary-bg: #e5ead9;
  --color-complimentary-fg: #4f6238;
  --color-friend-dot: #d8be7c;
  --color-friend-bg: #f1e8ce;
  --color-friend-fg: #7a6428;

  /* Texte des cellules Calendar à fond saturé (design/Calendar.dc.html PAL) —
     distinct des -fg pâles ci-dessus (pensés pour un badge sur fond -bg clair) :
     la grille remplit la cellule entière avec le -dot saturé, il lui faut un
     texte plus sombre pour rester lisible. Repéré en écart de couleur (CLAUDE.md
     décision n°13) : calendar.js utilisait -bg/-fg (badge) pour les cellules,
     jamais vu dans le prototype qui remplit en saturé plein. */
  --color-airbnb-cell-fg: #4a1712;
  --color-booking-cell-fg: #17242e;
  --color-direct-cell-fg: #3a2c00;
  --color-complimentary-cell-fg: #22301a;
  --color-friend-cell-fg: #3a2f10;

  /* Semantic */
  --color-success: #3d7a54;
  --color-warning: #a5762a;
  --color-danger: #b5392a;
  --color-info-tint: #f6edd6;

  /* Calendar grid states (fermeture, conflit — cf. Calendar.dc.html du
     handoff Claude Design, mêmes teintes) */
  --color-closed: #c7c4bb;
  --color-closed-fg: #41403a;
  --color-conflict: #b5271c;
  --color-conflict-fg: #ffffff;

  /* Tasks (chantier Tasks, implémentation front) — cf. design/Tasks.dc.html.
     Violet "auto" (jamais réutilisé ailleurs : tâche système, jamais
     plannable/droppable) et teinte "closed by system" (verte, distincte de
     --color-success qui sert déjà à d'autres badges de paiement). */
  --color-task-auto: #8a6a9a;
  --color-task-auto-bg: #ece4f0;
  --color-task-system-closed-bg: #eef3ec;
  --color-task-system-closed-fg: #3a5c42;

  /* Statut-badge par statut (correctif 28 juillet 2026, cf. design/Tasks.dc.html
     SCHIP + rowFor() — reçu après coup, cf. CLAUDE.md index) : valeurs reprises
     telles quelles du prototype, jamais approchées via un token générique déjà
     existant (ex. --color-danger ne matche pas exactement le rose "Late" du
     prototype). in_progress excepté : SCHIP.in_progress == --color-info-tint/
     --color-warning déjà en place (.status-badge.warning), aucun doublon créé. */
  --color-task-to-plan-bg: #efece4;
  --color-task-to-plan-fg: #8a877f;
  --color-task-planned-bg: #dfe8ee;
  --color-task-planned-fg: #3f5a6e;
  --color-task-done-bg: #e5ead9;
  --color-task-done-fg: #3d7a54;
  --color-task-dropped-bg: #f2f0ea;
  --color-task-dropped-fg: #a8a49a;
  --color-task-late-bg: #f6e3e0;
  --color-task-late-fg: #b5392a;

  /* Radii */
  --radius-chip: 9px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-sheet: 22px;
  --radius-pill: 999px;

  /* Spacing (4px base) */
  --space-tight: 6px;
  --space-snug: 8px;
  --space-base: 12px;
  --space-card: 16px;
  --space-section: 20px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica, system-ui, sans-serif;
  background: var(--color-canvas);
  color: var(--color-ink);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
}

.app-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--color-canvas);
}

.app-content {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 24px;
}

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-slate);
}

.btn-primary {
  height: 48px;
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border: 1.5px solid var(--color-btn-primary-border);
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  height: 48px;
  background: #fff;
  border: 1.5px solid var(--color-field-border);
  color: var(--color-ink);
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Bottom nav — identique sur toutes les pages, cf. INTERFACE.md §4 Navigation */
.bottom-nav {
  height: 64px;
  flex: none;
  border-top: 1px solid var(--color-line);
  background: #fff;
  display: flex;
  align-items: stretch;
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-faint);
  cursor: pointer;
  font-size: 10px;
}
.bottom-nav a.active {
  color: var(--color-accent);
}

/* Unit chip — identité de chambre (Today, fiche réservation) */
.unit-chip {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-chip);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.unit-chip.small {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 12px;
}

/* Badge de statut — écarts par rapport aux 8 couleurs de statut (Calendar) */
.status-badge {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.status-badge.success { background: #e7f0e9; color: var(--color-success); }
.status-badge.danger { background: #faece9; color: var(--color-danger); }
.status-badge.warning { background: var(--color-info-tint); color: var(--color-warning); }
.status-badge.task-to-plan { background: var(--color-task-to-plan-bg); color: var(--color-task-to-plan-fg); }
.status-badge.task-planned { background: var(--color-task-planned-bg); color: var(--color-task-planned-fg); }
.status-badge.task-done { background: var(--color-task-done-bg); color: var(--color-task-done-fg); }
.status-badge.task-dropped { background: var(--color-task-dropped-bg); color: var(--color-task-dropped-fg); }
.status-badge.task-late { background: var(--color-task-late-bg); color: var(--color-task-late-fg); }

.section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  background: #efece4;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

/* Variantes dynamiques (écran Tasks, design/Tasks.dc.html) : le compte de
   la section Now bascule ambre/rouge selon qu'un élément affiché y est en
   retard (nowLate() côté tasks.js) ; celui de Planned reste bleu, toujours
   la même teinte que le badge de statut "planned". */
.section-count.now-amber { background: var(--color-info-tint); color: var(--color-warning); }
.section-count.now-late { background: var(--color-task-late-bg); color: var(--color-task-late-fg); }
.section-count.planned { background: var(--color-task-planned-bg); color: var(--color-task-planned-fg); }