/* Participant Mode — Light, warm, editorial.
   Notion-inspired content-forward aesthetic.
   Generous whitespace, serif body, magazine quality. */

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

  /* Surface hierarchy (light) */
  --surface-base: #ffffff;
  --surface-page: #f8fafc;
  --surface-page-translucent: rgba(255, 255, 255, 0.7);
  --surface-raised: var(--brand-50);
  --surface-overlay: #ffffff;
  --surface-sunken: var(--brand-200);
  --surface-neutral: #f1f5f9; /* Cool slate gray — brand-free panel backgrounds */
  --surface-hover: var(--brand-50);
  --surface-active: var(--brand-100);
  --surface-selected: var(--brand-100);

  /* Text hierarchy */
  --text-primary: #1e293b;
  --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 */
  --border-default: #94a3b8;
  --border-subtle: #cbd5e1;
  --border-strong: var(--brand-300);
  --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-default);
  --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 (light mode — soft, warm) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(0, 0, 0, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Input fields */
  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-border: var(--border-default);
  --input-border-focus: var(--accent-primary);
  --input-placeholder: var(--text-tertiary);

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #94a3b8;
  --scrollbar-thumb-hover: #64748b;
}

/* Ember theme override: warm neutrals for orange tones */
[data-theme="ember"][data-mode="participant"] {
  --accent-primary: var(--brand-700);
  --accent-hover: var(--brand-800);

  /* Buttons: match accent */
  --button-primary-bg: var(--brand-700);
  --button-primary-bg-hover: var(--brand-800);

  --surface-neutral: #f5f5f4; /* Warm stone gray */

  /* Warm neutrals (stone palette) */
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-tertiary: #a8a29e;
  --text-disabled: #d6d3d1;
  --border-default: #a8a29e;
  --border-subtle: #d6d3d1;
}