/*
 * EPFL v5 "soft tray" — design tokens (plain CSS custom properties).
 * Light theme only: dark mode has not been designed for v5.
 * Used by css/base.css; Tailwind projects use tailwind/globals.css instead (same values, HSL form).
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --canvas: #f1f1f3;
  --frame: #f1f1f3;
  --panel: #ffffff;
  --tray: #f3f3f5;
  --tray-2: #e6e6e9;

  /* Text */
  --ink: #18181a;
  --ink-2: #4a4a4f;
  --mute: #8b8b91;
  --faint: #b4b4b9;
  --hair: #ececee;

  /* EPFL red — single accent: primary button (--red-btn) and "now" markers (--red) */
  --red: #ff0000;
  --red-btn: #e60000;
  --red-btn-h: #c80000;
  --red-soft: #fff0f0;
  --red-ink: #d40000;

  /* Type: Suisse Int'l needs the licensed webfont files; Helvetica/Arial fallback */
  --sans: "Suisse Int'l","SuisseIntl","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Radii: frame 32 · panel 24 · tray 18 · tile 14 · pill */
  --r-frame: 32px;
  --r-panel: 24px;
  --r-tray: 18px;
  --r-tile: 14px;
  --r-pill: 999px;

  /* Shadows: --lift only on the selected/raised item; --float only on floating layers (menus, popovers, bars) */
  --lift: 0 1px 1px rgba(0,0,0,.04), 0 4px 10px -2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03);
  --float: 0 2px 4px rgba(0,0,0,.06), 0 20px 40px -12px rgba(0,0,0,.22);

  /* Layout */
  --side: 264px;
  --gap: 20px;
}