/* Participant Mode — Light, warm, content-forward.
   Soul: The Current (default) — same crisp neutral structure as admin
   (the EE previewer crossover demands it); warmth enters through the
   type voice (soul tokens), not tinted surfaces.
   Act 1 Foundation Lock: fixes F1 (borders), F2 (surfaces);
   makes shell/coach.css TEMP override deletable. */

[data-mode="participant"] {
  color-scheme: light;

  /* Surface hierarchy (light)
     Act1: raised/sunken were brand-tinted; neutral now. The member
     shell no longer needs its TEMP white override — delete it. */
  --surface-base: #ffffff;
  --surface-page: #f8fafc;
  --surface-page-translucent: rgba(255, 255, 255, 0.7);
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-sunken: #f1f5f9;
  --surface-neutral: #f1f5f9; /* Cool slate gray — brand-free panel backgrounds */
  --surface-hover: #f8fafc;
  --surface-active: var(--brand-100);
  --surface-selected: var(--brand-50);
  --surface-tint: var(--brand-50);

  /* Text hierarchy (Act1: primary aligned with admin ink for parity
     inside the EE previewer) */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-disabled: #cbd5e1;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  /* Accent colors */
  --accent-primary: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-muted: var(--brand-100);
  --accent-subtle: var(--brand-50);
  /* Frosted-glass tinted variant of --accent-subtle. Used by the
     PWA bottom toolbar (layouts/coach_pwa.css). Theme-aware via
     color-mix; no per-theme overrides required because --accent-subtle
     is already theme-aware (resolves to that theme's --brand-50). */
  --accent-subtle-translucent: color-mix(in srgb, var(--accent-subtle) 80%, transparent);

  /* Border colors (Act1 — F1: hairlines per spec; strong is neutral) */
  --border-default: #e2e8f0;
  --border-subtle: #eef2f6;
  --border-strong: #cbd5e1;
  --border-focus: var(--brand-600);

  /* Button colors */
  --button-primary-bg: var(--brand-600);
  --button-primary-bg-hover: var(--brand-700);
  --button-primary-text: #ffffff;
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: var(--brand-50);
  --button-secondary-text: var(--text-secondary);
  --button-secondary-border: var(--border-strong); /* Act1: control affordance */
  --button-ghost-bg-hover: var(--surface-hover);
  --button-ghost-text: var(--text-secondary);
  --button-danger-bg: #ef4444;
  --button-danger-bg-hover: #dc2626;
  --button-danger-text: #ffffff;

  /* Status colors */
  --status-success: #16a34a;
  --status-success-bg: #f0fdf4;
  --status-success-text: #15803d;
  --status-warning: #d97706;
  --status-warning-bg: #fffbeb;
  --status-warning-text: #92400e;
  --status-error: #dc2626;
  --status-error-bg: #fef2f2;
  --status-error-text: #991b1b;
  --status-info: var(--brand-600);
  --status-info-bg: var(--brand-50);
  --status-info-text: var(--brand-800);

  /* Shadows (Act1: slate-tinted, carry separation) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.09);
  --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.07), 0 16px 48px rgba(15, 23, 42, 0.11);
  --shadow-glow: 0 0 20px rgba(15, 23, 42, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Input fields (Act1: visible affordance, one step darker than hairlines) */
  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-border: #cbd5e1;
  --input-border-focus: var(--accent-primary);
  --input-placeholder: var(--text-tertiary);

  /* Scrollbar (Act1: lighter) */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}