/*
 * 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.
 */

:root {
  color-scheme: light;

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

  /* Foregrounds. --fg-subtle lifted from ash to fog so captions/timestamps/
     empty-states clear AA (≈4.6:1 on the page); stays below --fg-muted
     (smoke, ≈7.5:1) so the tiers don't collapse. */
  --fg-subtle: var(--color-fog);
  --fg-muted: var(--color-smoke);
  --fg-default: var(--color-near-black);
  --fg-emphasis: var(--color-black);
  --fg-on-emphasis: var(--color-white);

  /* Scrim — translucent dark wash for legible text over an arbitrary image
     (card image name band, and available for any image overlay). Constant
     across themes: it sits over the image, not the app canvas, so it must
     not flip with the theme. */
  --bg-scrim: rgba(0, 0, 0, 0.55);
  --fg-on-scrim: var(--color-white);

  /* Borders. --border-default lifted from silver to stone so structural
     boundaries read; stays below --border-strong (ash). */
  --border-default: var(--color-stone);
  --border-strong: var(--color-ash);
  --border-emphasis: var(--color-black);

  /* Link underline — muted (not subtle) so the affordance clears the 3:1
     non-text-indicator threshold. */
  --link-underline: var(--fg-muted);

  /* 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;

  /* Onboarding (sky) */
  --onboarding-fg: #1e40af;
  --onboarding-border: #93c5fd;
  --onboarding-bg: #dbeafe;
  --onboarding-emphasis: #2563eb;

  /* Skeleton — bg sits one step above page; shimmer is one step lighter
     than bg so the band reads as a highlight passing across the surface. */
  --skeleton-bg: var(--color-pearl);
  --skeleton-shimmer: var(--color-snow);
}