/*
 * Light theme (vanilla prototype only).
 *
 * Every component reads its colours from the design tokens in tokens.css, so the light theme
 * only redefines those tokens. It is active when <html data-theme="light"> is set
 * (Beállítások › Megjelenítés › Téma); the dark theme in tokens.css stays the default.
 *
 * Contrast (WCAG AA, checked for every surface):
 *   text, muted, subtle text, accent and status colours used as text  ≥ 4.5:1
 *   form-control borders, switch parts and the focus ring               ≥ 3:1
 *   white text on the accent buttons                                    ≥ 4.5:1
 *
 * The sheet music (the generated sheet in Kottalapozás) has its own fixed paper and ink
 * colours in PerformanceScreen.css and is intentionally not themed.
 */
:root[data-theme='light'] {
  /* Native controls, scrollbars and the date picker follow the theme */
  color-scheme: light;

  /* Surfaces — soft off-white page, white cards, light grey layers */
  --color-bg: #f3f4f6;
  --color-surface-1: #ffffff;
  --color-surface-2: #f6f7f9;
  --color-surface-3: #eceef1;
  --color-overlay: rgb(28 32 38 / 45%);

  /* Lines */
  --color-border: #e2e5e9;
  --color-border-strong: #cfd4da;
  /* Form controls and secondary buttons — at least 3:1 against every surface (WCAG 1.4.11) */
  --color-border-control: #7d8590;

  /* Text — dark charcoal */
  --color-text: #1c2026;
  --color-text-muted: #4b535d;
  /* Subtle text stays at least 4.5:1 on every surface, including surface-3 (WCAG AA) */
  --color-text-subtle: #5c6570;

  /* Accent — the same teal, darker for contrast on light surfaces */
  --color-accent: #1b7569;
  --color-accent-hover: #16665b;
  --color-accent-active: #12574e;
  --color-accent-soft: rgb(27 117 105 / 10%);
  --color-accent-line: rgb(27 117 105 / 35%);
  --color-on-accent: #ffffff;

  /* Status — darker so they also work as text */
  --color-status-online: #1d7a52;
  --color-status-pending: #8a5f0b;
  --color-status-offline: #b23b35;

  /* Elevation — a softer shadow on light surfaces */
  --shadow-modal: 0 24px 64px rgb(28 32 38 / 18%);

  /*
   * Table column headings (light theme only): pale teal, opaque, teal labels (5.1:1).
   * Used by Teljes repertoár, Saját kottáim and Műsorlisták (their *.light.css files).
   */
  --color-table-head-bg: #e1efec;
  --color-table-head-text: #176e65;
  --color-table-head-border: #a9cdc4;

  /*
   * Boxed outline icons (light theme only): Hogyan működik? sections and the home navigation cards.
   * Deep teal icon (5.8:1), a firmer teal-tinted edge, a barely tinted fill, a slightly heavier stroke.
   */
  --color-icon-box-fg: #176e65;
  --color-icon-box-border: #9fc6bd;
  --color-icon-box-border-hover: rgb(23 110 101 / 55%);
  --color-icon-box-bg: rgb(23 110 101 / 4%);
  --icon-box-stroke: 1.9;
}

/*
 * Kottalapozás: the white sheet would blend into the light page, so the viewer background is a
 * slightly deeper grey in the light theme (the dark theme already contrasts with the paper).
 * Only the surroundings change — the sheet's own colours stay fixed.
 */
:root[data-theme='light'] .perf {
  background: #dfe2e7;
}