@import './theme-controls.css';

/* Shared surface roles. Project, participant and brand colours remain data. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-background: #0a1019;
  --ui-surface: #101925;
  --ui-surface-raised: #192939;
  --ui-surface-sunken: #0b131f;
  --ui-surface-hover: #24394e;
  --ui-surface-selected: #253f59;
  --ui-canvas: #0d1218;
  --ui-text: #edf2fb;
  --ui-muted: #a3b1c4;
  --ui-border: #35485c;
  --ui-border-strong: #7d9db6;
  --ui-accent: #9bc4ff;
  --ui-accent-fill: #94baff;
  --ui-accent-hover: #b4ceff;
  --ui-on-accent: #0e1d35;
  --ui-focus: #bad8ff;
  --ui-positive: #8cdbc0;
  --ui-positive-surface: #193831;
  --ui-warning: #edc586;
  --ui-warning-surface: #362d1e;
  --ui-danger: #ffadb6;
  --ui-danger-surface: #43232d;
  --ui-purple: #ccb0f2;
  --ui-purple-surface: #2c2540;
  --ui-grid: #9aafbf;
  --ui-shadow: #000000;
  --ui-backdrop: #030710;
  --ui-overlay-highlight: #ffffff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ui-background: #edf2f6;
  --ui-surface: #ffffff;
  --ui-surface-raised: #e8eff5;
  --ui-surface-sunken: #f6f9fc;
  --ui-surface-hover: #dce8f2;
  --ui-surface-selected: #d4e5f4;
  --ui-canvas: #f4f7fa;
  --ui-text: #172c3d;
  --ui-muted: #4c6378;
  --ui-border: #a8b9c9;
  --ui-border-strong: #58758c;
  --ui-accent: #17568c;
  --ui-accent-fill: #c8dff2;
  --ui-accent-hover: #b5d3ec;
  --ui-on-accent: #14344e;
  --ui-focus: #0967b1;
  --ui-positive: #17624b;
  --ui-positive-surface: #dff1e9;
  --ui-warning: #805012;
  --ui-warning-surface: #fff0d4;
  --ui-danger: #a72c40;
  --ui-danger-surface: #fde5e8;
  --ui-purple: #6a388f;
  --ui-purple-surface: #f0e5fa;
  --ui-grid: #7892a7;
  --ui-shadow: #2b4357;
  --ui-backdrop: #243649;
  --ui-overlay-highlight: #163854;
}

/* Existing modules consume the same profile through their stable aliases. */
:root {
  --bg: var(--ui-background);
  --panel: var(--ui-surface);
  --raised: var(--ui-surface-raised);
  --line: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --blue: var(--ui-accent);
  --green: var(--ui-positive);
  --amber: var(--ui-warning);
  --red: var(--ui-danger);
  --purple: var(--ui-purple);
  color: var(--ui-text);
  background: var(--ui-background);
  accent-color: var(--ui-accent);
  scrollbar-color: var(--ui-border-strong) var(--ui-surface-sunken);
}

::selection {
  color: var(--ui-text);
  background: var(--ui-surface-selected);
}

input::placeholder,
textarea::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--ui-muted);
  background: var(--ui-surface-raised);
}

/* Strong actions have their own foreground; it must follow the fill profile. */
.button.primary {
  color: var(--ui-on-accent);
  background: var(--ui-accent-fill);
  border-color: var(--ui-accent-fill);
}

.button.primary:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}

/* The light profile uses dark ink even on accent-coloured controls. */
:root[data-theme="light"] .button.primary {
  border-color: var(--ui-accent);
}

:root[data-theme="light"] .brand-mark {
  color: var(--ui-text);
  background: var(--ui-surface-selected);
  border-color: var(--ui-border-strong);
}

:root[data-theme="light"] :is(.rj-phase-number, .rj-code,
    .rj-phase-heading > span:last-child, .swim-phase-heading > span) {
  color: var(--ui-text);
}

/* Stored phase colours may be dark. HTML reading surfaces use a pale tint;
   the canonical colour remains on the phase edge and in the colour picker. */
:root[data-theme="light"] .phase-list button[data-phase-style] {
  color: var(--ui-text);
  background: color-mix(in srgb, var(--phase-fill) 12%, var(--ui-surface));
  border-color: var(--ui-border);
  border-left-color: var(--phase-outline);
}

:root[data-theme="light"] .phase-list button[data-phase-style]:is(:hover, [aria-current="true"]) {
  background: var(--ui-surface-selected);
  border-color: var(--ui-border-strong);
  border-left-color: var(--phase-outline);
}

:root[data-theme="light"] .detail-header[data-phase-style] {
  color: var(--ui-text);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--phase-fill) 12%, var(--ui-surface)), var(--ui-surface));
}

:root[data-theme="light"] .rj-phase-heading {
  background: color-mix(in srgb, var(--rj-phase-fill) 12%, var(--ui-surface));
  border-color: var(--ui-border-strong);
  border-left-color: var(--rj-phase-color);
}

:root[data-theme="light"] :is(.swim-phase-heading, .swim-cell) {
  background: color-mix(in srgb, var(--swim-phase-fill, var(--ui-surface-raised)) 12%, var(--ui-surface));
}

:root[data-theme="light"] :is(.participant-chip b, .communication-type, .swim-entity-symbol) {
  color: var(--ui-text);
}

/* Logo artwork has its own explicit rendering profile. */
.project-logo {
  isolation: isolate;
}