/* tokens.css: every themeable value. These defaults ARE the "classic" theme.
 *
 * A theme (web/themes/<id>.css) overrides any of these under :root[data-theme="<id>"] and may
 * add decorations of its own. Widgets only ever use var(--…), never literal colours or fonts.
 *
 * Physical layout: the TV sits behind three glass panes split by two wooden posts, so content
 * lives in three equal columns (one per pane). Nothing should span across a post.
 */
:root {
  /* Surfaces and text */
  --color-bg: #000;
  --color-text: #fff;
  --color-text-muted: #ccc;
  --color-rule: #444;
  --color-card: #111;
  --color-card-edge: #666;
  --color-up: #2ecc71;
  --color-down: #e74c3c;
  --color-alert: red;
  --color-warning: #f39c12;
  --color-highlight: rgba(52, 152, 219, 0.3);
  --color-highlight-wash: rgba(52, 152, 219, 0.2);
  --color-banner: rgba(200, 200, 200, 0.15);

  /* Reminder chips (an animated gold "shine") */
  --reminder-text: #000;
  --reminder-fill: linear-gradient(40deg,
    rgba(255, 245, 100, 1) 0%,
    rgba(255, 255, 150, 1) 50%,
    rgba(200, 180, 50, 1) 60%,
    rgba(100, 80, 0, 1) 90%);
  --reminder-radius: 5px;
  --reminder-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Type */
  --font-display: 'Raleway', 'Segoe UI', sans-serif;   /* clock, weather, reminders */
  --font-data: Arial, sans-serif;                       /* appointments, market */
  --font-variant-display: small-caps;
  --size-base: 20pt;
  --size-clock: 82pt;
  --size-clock-seconds: 26pt;
  --size-clock-text: 22pt;
  --size-date: 24pt;
  --size-temp: 82pt;
  --size-weather: 16pt;
  --size-forecast: 12pt;
  --size-reminders: 12pt;
  --size-reminder: 11pt;
  --size-appointments: 10pt;
  --size-appointment-header: 12pt;
  --size-appointment-owner: 11pt;
  --size-market: 14pt;
  --size-banner: 10pt;
  --size-greeting: 48px;
  --size-indicator: 24px;

  /* Layout */
  --column-padding: 10px;
  --panel-width: 380px;      /* appointments and market */
  --appointments-gap: 31px;  /* space between reminders and appointments (was a <br>) */
  --card-radius: 5px;
  --card-padding: 8px;

  /* Market table */
  --market-cell-gap: 10px;
  --market-range-width: 74px;
  --market-range-track: rgba(255, 255, 255, 0.35);
  --size-market-small: 11pt;

  /* Photo of the day (centre pane, between the world map and the market) */
  --photo-max-width: 440px;
  --photo-max-height: 330px;
  --photo-margin: 14px;
  /* Soft edges so the photo melts into the mirror instead of sitting on it as a rectangle. */
  --photo-mask: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  --photo-filter: brightness(0.92);
  --photo-fade: 1.2s;
  --size-photo-caption: 11pt;

  /* Voice assistant (centre pane): the daytime ring and the text under it */
  --assistant-ring-size: 170px;
  --assistant-ring-colors: #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b;
  --assistant-face-height: 62vh;
  --size-assistant-heard: 14pt;
  --size-assistant-reply: 20pt;
  --size-timer: 16pt;
  --color-timer-done: #ffd93d;

  /* Calibration overlay (admin → Calibrate): loud colours that are easy to see peeking past wood */
  --calibration-post: #ff00ff;
  --calibration-edge: #00ffff;

  /* Motion */
  --fade-in: 2s;
}