/* ─────────────────────────────────────────────────────────────────────
   tokens.css — design system partagé Affût Heures
   Référencé par index.html (data-app="employee") et admin.html (data-app="admin").
   Le scoping [data-app][data-theme] permet l'inversion de palette
   index/admin sans duplication de styles dans les deux pages.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand (références neutres, jamais utilisées directement par les composants) ── */
  --brand-blue:           #001A72;
  --brand-blue-strong:    #001050;
  --brand-blue-light:     #4F80FF;
  --brand-blue-light-dk:  #3560CC;
  --brand-blue-soft:      #6B9FFF;
  --brand-fuchsia:        #E0004D;
  --brand-fuchsia-strong: #B8003F;

  /* ── Surfaces et typographie (light, communes aux deux pages) ── */
  --surface:    #FFFFFF;
  --bg-card:    var(--surface);   /* fond de carte/panneau — alias de --surface en light */
  --text:       #1C1410;
  --text-muted: #6B5A4A;
  --border:     #E2D8CC;

  /* ── Sémantique ── */
  --success:    #2E6B47;
  --danger:     #B44040;

  /* ── Warning ambré (utilisé dans bandeaux de rappel, badges, calendrier) ── */
  --color-warning-bg:        #FEF3C7;  /* fond standard (cal-day.has-seqs, alertes Isabelle) */
  --color-warning-bg-soft:   #FFFBEB;  /* fond très pâle (reminder-banner index) */
  --color-warning-bg-pale:   #FFF3CD;  /* fond pastel solde zéro */
  --color-warning-fg:        #F59E0B;  /* bordure / accent vif */
  --color-warning-fg-strong: #92400E;  /* texte foncé sur fond ambré */
  --color-warning-fg-alt:    #D97706;  /* variante texte calendrier */
  --color-warning-fg-text:   #856404;  /* variante texte bal-zero */

  /* ── Trace admin (violet UI, marque les modifications faites par Isabelle) ── */
  --mark-admin: #7C3AED;
}

/* ────────────────────────────────────────────────────────────
   PERSONA — Salarié (index.html)
   Bleu marine = primaire, fuchsia = accent
   ──────────────────────────────────────────────────────────── */
[data-app="employee"] {
  --bg:         #F8F5F0;
  --primary:    var(--brand-blue);
  --primary-dk: var(--brand-blue-strong);
  --accent:     var(--brand-fuchsia);
  --r:          12px;
  --shadow:     0 2px 10px rgba(0,0,0,0.07);
}

/* ────────────────────────────────────────────────────────────
   PERSONA — Admin Isabelle (admin.html)
   Fuchsia = primaire, bleu marine = accent (palette inversée volontaire)
   ──────────────────────────────────────────────────────────── */
[data-app="admin"] {
  --bg:         #F5F2EE;
  --primary:    var(--brand-fuchsia);
  --primary-lt: var(--brand-fuchsia-strong);
  --accent:     var(--brand-blue);
  --r:          10px;
  --shadow:     0 2px 8px rgba(0,0,0,0.07);
}

/* ────────────────────────────────────────────────────────────
   THEME — Dark (commun aux deux personas)
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface:    #1C1F2B;
  --bg-card:    #23273A;  /* fond de carte en dark — légèrement plus clair que --surface */
  --text:       #E8E3DD;
  --text-muted: #A4A8B8;
  --border:     #2A2E40;
  --success:    #3A9065;
  --danger:     #D44545;
}

[data-app="employee"][data-theme="dark"] {
  --bg:         #111318;
  --primary:    var(--brand-blue-light);
  --primary-dk: var(--brand-blue-light-dk);
  --shadow:     0 2px 12px rgba(0,0,0,0.35);
}

[data-app="admin"][data-theme="dark"] {
  --bg:         #111318;
  --accent:     var(--brand-blue-soft);
  --shadow:     0 2px 12px rgba(0,0,0,0.4);
}