/* ============================================================================
   tokens.css — Design tokens de Prof_OS
   Reprend les valeurs du handoff (design_handoff_prof_os/README.md), qui les
   avait toutes en littéraux inline. Elles sont remontées ici une fois pour
   toutes : toute modification de charte se fait dans ce seul fichier.
   ========================================================================== */

:root {
  /* ── Couleurs par app (oklch) ─────────────────────────────────────────── */
  --app-blue-from:   oklch(0.72 0.13 240);
  --app-blue-to:     oklch(0.60 0.15 240);
  --app-blue:        oklch(0.65 0.14 240);
  --app-blue-deep:   oklch(0.50 0.15 240);

  --app-notes-from:  oklch(0.82 0.15 95);
  --app-notes-to:    oklch(0.72 0.16 85);

  --app-green-from:  oklch(0.72 0.13 150);
  --app-green-to:    oklch(0.55 0.14 150);
  --app-green:       oklch(0.55 0.14 150);

  --app-neutral-from: oklch(0.65 0.02 260);
  --app-neutral-to:   oklch(0.50 0.02 260);
  --app-calc-from:    oklch(0.60 0.02 260);
  --app-calc-to:      oklch(0.42 0.02 260);

  --app-web-from:    oklch(0.70 0.13 30);   /* webapps externes */
  --app-web-to:      oklch(0.55 0.15 30);

  /* ── Glass ────────────────────────────────────────────────────────────── */
  --glass-bg:        rgba(255, 255, 255, 0.60);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-blur:      blur(24px);
  --glass-border:    1px solid rgba(255, 255, 255, 0.60);

  /* ── Rayons ───────────────────────────────────────────────────────────── */
  --r-window: 12px;
  --r-menu:   14px;
  --r-btn:    8px;
  --r-btn-sm: 7px;
  --r-btn-lg: 10px;

  /* ── Ombres ───────────────────────────────────────────────────────────── */
  --sh-icon:   0 3px 8px rgba(0, 0, 0, 0.15);
  --sh-window: 0 20px 50px rgba(0, 0, 0, 0.28);
  --sh-menu:   0 -10px 50px rgba(0, 0, 0, 0.25);
  --sh-bar:    0 -1px 12px rgba(0, 0, 0, 0.08);

  /* ── Texte ────────────────────────────────────────────────────────────── */
  --txt:        #1d1d1f;
  --txt-soft:   #6e6e73;
  --txt-icon:   #3a3a3c;
  --danger:     #e81123;

  /* ── Typographie ──────────────────────────────────────────────────────── */
  --font: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fs-title:  12.5px;   /* titre de fenêtre, 600 */
  --fs-label:  12px;     /* libellé d'icône */
  --fs-body:   13px;
  --fs-clock:  14px;     /* heure, 600 */
  --fs-date:   11px;

  /* ── Métriques du shell ───────────────────────────────────────────────── */
  --taskbar-h:  48px;
  --titlebar-h: 38px;
  --start-w:   280px;

  /* ── Horloge ──────────────────────────────────────────────────────────── */
  --clock-bg:  linear-gradient(180deg, #ABABAB, #28211a);
  --clock-txt: #EDEDED;
}

/* Les 5 fonds d'écran, repris verbatim du prototype. */
:root {
  --wallpaper-0: radial-gradient(circle at 15% 15%, oklch(0.6 0.16 240 / 0.55), transparent 45%), radial-gradient(circle at 85% 85%, oklch(0.78 0.15 90 / 0.5), transparent 45%), linear-gradient(150deg, oklch(0.88 0.05 240), oklch(0.82 0.08 300));
  --wallpaper-1: radial-gradient(circle at 85% 10%, oklch(0.8 0.15 90 / 0.55), transparent 45%), radial-gradient(circle at 10% 90%, oklch(0.7 0.16 220 / 0.5), transparent 45%), linear-gradient(160deg, oklch(0.5 0.16 250), oklch(0.65 0.17 300));
  --wallpaper-2: radial-gradient(circle at 10% 85%, oklch(0.7 0.15 90 / 0.5), transparent 45%), radial-gradient(circle at 90% 10%, oklch(0.6 0.16 240 / 0.5), transparent 45%), linear-gradient(140deg, oklch(0.9 0.03 90), oklch(0.8 0.07 250));
  --wallpaper-3: radial-gradient(circle at 15% 10%, oklch(0.85 0.1 200 / 0.55), transparent 45%), radial-gradient(circle at 85% 90%, oklch(0.5 0.17 280 / 0.5), transparent 45%), linear-gradient(155deg, oklch(0.62 0.16 260), oklch(0.75 0.14 200));
  --wallpaper-4: radial-gradient(circle at 90% 10%, oklch(0.6 0.16 250 / 0.5), transparent 45%), radial-gradient(circle at 10% 90%, oklch(0.78 0.15 90 / 0.5), transparent 45%), linear-gradient(145deg, oklch(0.85 0.06 250), oklch(0.9 0.05 90));
}

/* ── Base partagée par login.php et index.php ───────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 4px; }

/* ── Logo Prof.re (piste 1c du handoff : monogramme + wordmark) ─────────── */
.logo { display: flex; align-items: center; gap: 14px; }

.logo-badge {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(160deg, oklch(0.62 0.15 240), oklch(0.48 0.16 240));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: #fff; font-size: 26px; font-weight: 700;
  flex-shrink: 0;
}

.logo-word {
  font-size: 26px; font-weight: 700; letter-spacing: -0.3px; color: var(--txt);
}
.logo-word .tld { color: oklch(0.5 0.17 240); }