:root {
  /* Base colors */
  --border: #cfd4da;
  --text: #24292f;
  --bg: #ffffff;
  /* Surfaces (panels/canvases) background; default links to --bg */
  --surface-bg: var(--bg);
  /* Optional per-panel backgrounds (fallback to --surface-bg) */
  --panel-bg-1: var(--surface-bg);
  --panel-bg-2: var(--surface-bg);
  --panel-bg-3: var(--surface-bg);
  --panel-bg-4: var(--surface-bg);
  /* Canvas post-processing filter (e.g., invert for dark themes). */
  --canvas-filter: none;
  --muted: #f6f8fa;
  --accent: #4b6a88;  /* muted blue */
  --danger: #b04a4a;  /* muted red */
  /* Chord highlight color (used for chord-held buttons and marks header) */
  --chord-hilite: #ffd54f; /* warm yellow */

  /* Header shades (darkest at top). Edit these to retheme headers. */
  --hdr-top: #e9ecef;    /* overall top header */
  --hdr-mid: #f1f3f5;    /* toolbar header (import/export/etc.) */
  --hdr-panel: #f8f9fb;  /* individual panel headers */

  /* Button styling */
  --radius-btn: 6px;                 /* button & segmented control corner radius */
  --btn-border-color: var(--border); /* border color for buttons */
  --btn-bg: rgba(255, 255, 255, 0.15);         /* normal buttons (transparent) */
  --btn-bg-active: rgba(255, 255, 255, 0.30);  /* highlighted/active variant */
  --seg-btn-bg: rgba(255, 255, 255, 0.10);     /* segmented control buttons */
  --seg-btn-bg-active: rgba(255, 255, 255, 0.30);

  /* Fonts */
  /* Default UI + editor font now League Mono (falls back gracefully) */
  --font-ui: "League Mono", "Ostrich Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "League Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Display font for headings */
  --font-display: "League Mono", var(--font-ui);
  --font-display-weight: 300; /* 300=Light, 400=Regular, 500=Medium, 700=Bold, 900=Black */
  --font-ui-weight: 300;      /* default UI weight (Light) */

  /* Base font size for UI */
  --font-size-base: 14px;

  /* Panels: toolbox width */
  --markers-width: 170px; /* adjust to make the toolbox wider/narrower */

  /* Lattice dots (panels) */
  --lattice-dot: #a8aeb6; /* slightly darker grey */
}

/* Ostrich Sans removed; using League Mono */

/* Apply display font to headings (optional). Controlled by --font-display. */
h1,
.panel-title,
.timeline-title,
.settings-title,
.toolbox-title,
.inspector-title,
.editor-title {
  font-family: var(--font-display, var(--font-ui));
  font-weight: var(--font-display-weight, 700);
}

/* Apply default UI weight globally */
body { font-weight: var(--font-ui-weight, 500); }

/*
 * Self-hosted font (optional): League Mono from The League of Moveable Type
 * Place WOFF files in src/assets/fonts/league-mono/ and update the src URLs if filenames differ.
 * Common names:
 *   - LeagueMono-Regular.woff  (400)
 *   - LeagueMono-Bold.woff     (700)
 *   - LeagueMono-Light.woff    (300)  [optional]
 *   - LeagueMono-Medium.woff   (500)  [optional]
 */
@font-face {
  font-family: "League Mono";
  src: url("../assets/fonts/LeagueMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Mono";
  src: url("../assets/fonts/LeagueMono-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Mono";
  src: url("../assets/fonts/LeagueMono-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Mono";
  src: url("../assets/fonts/LeagueMono-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Mono";
  src: url("../assets/fonts/LeagueMono-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/*
How to customize
----------------
- Change header tones: --hdr-top, --hdr-mid, --hdr-panel
- Change button translucency: --btn-bg, --btn-bg-active, --seg-btn-bg, --seg-btn-bg-active
- Change button roundness: --radius-btn
- Border color uses --btn-border-color (defaults to --border)
*/
/* Per-panel background colors via CSS variables */
#panels .panel:nth-child(1) { background: var(--panel-bg-1, var(--surface-bg)); }
#panels .panel:nth-child(1) .panel-body { background: var(--panel-bg-1, var(--surface-bg)); }
#panels .panel:nth-child(2) { background: var(--panel-bg-2, var(--surface-bg)); }
#panels .panel:nth-child(2) .panel-body { background: var(--panel-bg-2, var(--surface-bg)); }
#panels .panel:nth-child(3) { background: var(--panel-bg-3, var(--surface-bg)); }
#panels .panel:nth-child(3) .panel-body { background: var(--panel-bg-3, var(--surface-bg)); }
#panels .panel:nth-child(4) { background: var(--panel-bg-4, var(--surface-bg)); }
#panels .panel:nth-child(4) .panel-body { background: var(--panel-bg-4, var(--surface-bg)); }