/*
 * TRG light theme — usage token mappings for light mode.
 *
 * Loaded via <link> in both the React app and the styleguide. Only one
 * theme file is active at a time — the other has `disabled` set on its
 * <link> element. The palette (layer 1) lives in core.css; this file
 * re-points the semantic usage tokens at palette values suitable for a
 * light canvas.
 *
 * Known limitations:
 *   - bg-elevated points to --color-silver (#b8b8b8), which is darker
 *     than bg-surface (--color-pearl). The palette has no shade between
 *     pearl and silver, so hover/tooltip surfaces elevate via contrast
 *     rather than lightness. A new palette step around #f4f4f4 would
 *     fix this if needed.
 *   - Date picker SVG icons have their stroke color hardcoded in the
 *     background-image URL. The hover/focus variant uses a white stroke
 *     that becomes invisible on a white background.
 *   - Skeleton shimmer references the palette directly (escape hatch)
 *     and will look inverted in light mode.
 */

:root {
  color-scheme: light;

  /* Backgrounds */
  --bg-page: var(--color-white);
  --bg-surface: var(--color-pearl);
  --bg-elevated: var(--color-silver);
  --bg-emphasis: var(--color-black);

  /* Foregrounds */
  --fg-subtle: var(--color-ash);
  --fg-muted: var(--color-smoke);
  --fg-default: var(--color-near-black);
  --fg-emphasis: var(--color-black);
  --fg-on-emphasis: var(--color-white);

  /* Borders */
  --border-default: var(--color-silver);
  --border-strong: var(--color-ash);
  --border-emphasis: var(--color-black);

  /* Intent tokens — light-mode values are raw hex because the palette
   * doesn't have pale/deep variants of each hue. Values are drawn from
   * Tailwind's {hue}-100/300/600/800 scale for consistency. If light
   * mode matures, these should be promoted into palette tokens. */

  /* Danger (red) */
  --danger-fg: #991b1b;
  --danger-border: #fca5a5;
  --danger-bg: #fee2e2;
  --danger-emphasis: #dc2626;

  /* Success (green) */
  --success-fg: #166534;
  --success-border: #86efac;
  --success-bg: #dcfce7;
  --success-emphasis: #16a34a;

  /* Warning (amber) */
  --warning-fg: #92400e;
  --warning-border: #fcd34d;
  --warning-bg: #fef3c7;
  --warning-emphasis: #d97706;

  /* Admin (teal) */
  --admin-fg: #115e59;
  --admin-border: #5eead4;
  --admin-bg: #ccfbf1;
  --admin-emphasis: #0d9488;

  /* Dev (violet) */
  --dev-fg: #5b21b6;
  --dev-border: #c4b5fd;
  --dev-bg: #ede9fe;
  --dev-emphasis: #7c3aed;
}