/*
    Colour and type tokens. Every rule in App.css / Components.css takes its colours from these,
    the TradieOnTheMove Mobile approach, so a theme is one block of overrides rather than a hunt
    through selectors.

    Dark is the default (a stage is dark, and a bright phone on a music stand is a distraction).
    Light is opt-in via <html data-theme="light">.

    Section colours are meaning, not chrome: they stay the same in both themes so "the green one"
    is the chorus on every screen in the room.
*/
:root {
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --bg: #0e1116;
    --surface: #171b22;
    --surface-2: #1f252e;
    --surface-3: #2a313c;
    --border: #2f3743;
    --text: #e8ecf1;
    --text-muted: #9aa5b4;
    --text-faint: #5f6b7a;

    --accent: #ff9f1c;
    --accent-text: #1a1206;
    --danger: #ef4d5a;
    --success: #3ecf8e;
    --focus: #6aa8ff;

    --radius: 10px;
    --radius-lg: 16px;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    /* Behind a dialog: the page dimmed. */
    --scrim: rgba(0, 0, 0, 0.6);

    /* Section types - see Engine.QuickEntry.SECTION_TYPES. */
    --section-intro: #8e7cff;
    --section-verse: #3d8bfd;
    --section-pre-chorus: #20c5c5;
    --section-chorus: #3ecf8e;
    --section-post-chorus: #9ad94f;
    --section-bridge: #ff9f1c;
    --section-solo: #ef4d5a;
    --section-instrumental: #e85dc0;
    --section-breakdown: #b07a4f;
    --section-outro: #8b95a5;
    --section-custom: #c9b458;
}

html[data-theme="light"] {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #eef1f5;
    --surface-3: #e2e7ee;
    --border: #d5dbe3;
    --text: #141a22;
    --text-muted: #556172;
    --text-faint: #8a95a5;
    --accent-text: #1a1206;
    --shadow: 0 6px 24px rgba(20, 26, 34, 0.12);
    --scrim: rgba(20, 26, 34, 0.45);
}