/* ============================================================ MusicEdge — Canonical Design System (single source of truth) Linked by every page as: Do NOT redefine these tokens inline in a page. Set page-specific accents by overriding a token on a scoped selector if truly needed. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=DM+Sans:wght@400;500;600;700&display=swap'); /* Concert Hall skin fonts (loaded globally; only used by pages with data-skin="concert") */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;450;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ /* ---- Brand ---- */ --navy:#1a237e; --navy-dk:#0d1442; --navy-lt:#3949ab; --navy-soft:rgba(26,35,126,.08); --red:#b71c1c; --red-dk:#8e1414; --red-lt:rgba(183,28,28,.08); --purple:#4a148c; --purple-lt:rgba(74,20,140,.08); /* ---- Surfaces ---- */ --white:#fff; --cream:#faf8f5; --off-white:#f5f2ee; /* ---- Text ---- */ --text-dark:#1c1917; --text-body:#44403c; --text-sec:#78716c; --text-mut:#a8a29e; /* ---- Status / accents ---- */ --green:#15803d; --green-lt:rgba(21,128,61,.08); --blue:#1e40af; --blue-lt:rgba(30,64,175,.08); --orange:#d68910; --gold:#c9920a; --danger:#c62828; /* ---- Lines & elevation ---- */ --border:#e7e5e4; --border-lt:#ece8e4; --shadow:0 1px 4px rgba(0,0,0,.05); --shadow-md:0 2px 10px rgba(0,0,0,.07); --shadow-lg:0 4px 16px rgba(26,35,126,.12); /* ---- Typography ---- */ --font-body:'DM Sans',system-ui,sans-serif; --font-display:'Playfair Display',serif; /* ---- Back-compat aliases (older pages used these names) ---- Kept so legacy var() references resolve to the canonical values. Prefer the canonical names above in any new CSS. */ --off:var(--off-white); --td:var(--text-dark); --tb:var(--text-body); --ts:var(--text-sec); --tm:var(--text-mut); --bl:var(--border-lt); --sh:var(--shadow); --sh-lg:var(--shadow-lg); --bg:var(--cream); --card:var(--white); --brick:var(--red); --brick-lt:var(--red-lt); --red-soft:var(--red-lt); } /* ============================================================ CONCERT HALL skin (opt-in preview). Dormant until a page sets data-skin="concert" on . Default = Stage Mode (dark); add data-theme="house" for the light variant. This only REMAPS the canonical tokens — pages that hardcode colors may still leak (the audition app adds targeted overrides + a leak-neutralizer). Concept: one amber "spotlight" accent, teal = accepted/good, depth from hairlines not shadows, serif numerals for results. ============================================================ */ :root[data-skin="concert"]{ /* --- Stage Mode (dark, default) --- */ --white:#14161d; --cream:#0b0c10; --off-white:#1b1e27; --text-dark:#f4f2ec; --text-body:#c4c6d0; --text-sec:#8b8f9e; --text-mut:#6f7484; --border:#2a2e3a; --border-lt:#22252f; /* navy is the app's brand accent (text, borders, icons) far more than a background, so on dark it maps to the amber spotlight; the few navy-as-background selectors get dark overrides in audition-admin's skin block. navy-dk is that dark chip. */ --navy:#f2b455; --navy-dk:#2b3040; --navy-lt:rgba(242,180,85,.15); --navy-soft:rgba(242,180,85,.12); --red:#f27a7a; --red-dk:#e0595f; --red-lt:rgba(242,122,122,.13); --purple:#a99be0; --purple-lt:rgba(169,155,224,.14); --green:#5fd6a6; --green-lt:rgba(95,214,166,.14); --blue:#7fb2e8; --blue-lt:rgba(127,178,232,.13); --orange:#f0c04a; --gold:#f2b455; --danger:#f27a7a; --shadow:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 4px 14px rgba(0,0,0,.5); --shadow-lg:0 14px 36px rgba(0,0,0,.6); --accent:#f2b455; /* the Concert Hall spotlight */ --font-body:'Inter',system-ui,sans-serif; --font-display:'Fraunces',Georgia,serif; --font-mono:'IBM Plex Mono',monospace; } :root[data-skin="concert"][data-theme="house"]{ /* --- House Lights (light) --- */ --white:#ffffff; --cream:#f3f1ea; --off-white:#f7f4ec; --text-dark:#1b1a17; --text-body:#3f3b34; --text-sec:#6b6357; --text-mut:#8a857b; --border:#e4ddcf; --border-lt:#ece6da; /* All brand hues (navy, purple, the hardcoded reds) unify to warm ink; amber is the one accent. Semantic red stays a warm terracotta for danger; green a calm teal for success/accepted. */ --navy:#1f1d19; --navy-dk:#000; --navy-lt:rgba(181,125,30,.14); --navy-soft:rgba(181,125,30,.10); --purple:#1f1d19; --purple-lt:rgba(31,29,25,.07); --red:#c0503f; --red-dk:#a5402f; --red-lt:rgba(192,80,63,.10); --green:#2f8f74; --green-lt:rgba(47,143,116,.12); --blue:#2f6db5; --blue-lt:rgba(47,109,181,.10); --orange:#b57d1e; --gold:#b57d1e; --danger:#c0503f; --shadow:0 1px 3px rgba(60,50,30,.08); --shadow-md:0 3px 12px rgba(60,50,30,.10); --shadow-lg:0 12px 30px rgba(60,50,30,.14); --accent:#b57d1e; } /* Concert Hall — shared component behaviour for ANY [data-skin="concert"] page. Higher specificity than a page's own body/heading rules, so fonts swap without per-page edits. Amber accent lands on the common active/primary selectors the apps share. */ html[data-skin="concert"] body{font-family:var(--font-body)} html[data-skin="concert"] h1, html[data-skin="concert"] h2, html[data-skin="concert"] h3, html[data-skin="concert"] h4, html[data-skin="concert"] .section-title, html[data-skin="concert"] .card-title, html[data-skin="concert"] .title{font-family:var(--font-display)} html[data-skin="concert"] .tab.active, html[data-skin="concert"] .subtab.active{color:var(--accent)!important;border-bottom-color:var(--accent)!important} html[data-skin="concert"] .phase-btn.active{color:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--navy-lt)!important} html[data-skin="concert"] .input:focus, html[data-skin="concert"] .sel:focus, html[data-skin="concert"] input:focus, html[data-skin="concert"] select:focus{border-color:var(--accent)!important} /* House Lights leak-neutralisers: hardcoded DARK inline backgrounds/gradients that would otherwise float as dark boxes on the bone page. These near-black values are background-only, so remapping the whole background to themed ink (or terracotta for the dark reds) keeps their white text readable and on-palette. Scoped to House so the judges' dark Stage keeps its dark boxes. */ html[data-skin="concert"][data-theme="house"] [style*="#1a1a2e"], html[data-skin="concert"][data-theme="house"] [style*="#0d0d1a"], html[data-skin="concert"][data-theme="house"] [style*="#0d1442"], html[data-skin="concert"][data-theme="house"] [style*="#3a0f70"], html[data-skin="concert"][data-theme="house"] [style*="background:#1a237e"], html[data-skin="concert"][data-theme="house"] [style*="background:#6a1b9a"], html[data-skin="concert"][data-theme="house"] [style*="background:#1565c0"]{background:var(--navy)!important} html[data-skin="concert"][data-theme="house"] [style*="#8a1818"], html[data-skin="concert"][data-theme="house"] [style*="background:#c62828"]{background:var(--red)!important} /* Shared toast/snackbar pill -> warm ink instead of cold #333 */ html[data-skin="concert"][data-theme="house"] .toast{background:var(--text-dark)!important;color:var(--white)!important} /* ============================================================ Shared LOGIN card component (.me-login-*). One canonical sign-in look, mirroring index.html's card, tokenized so the concert skin themes it. Portals/login.html point their markup here so every sign-in surface matches. index.html keeps its own #meLoginCard copy. ============================================================ */ .me-login-card{background:var(--white);max-width:380px;width:100%;margin:2rem auto;border-radius:14px;padding:1.6rem 1.5rem;box-shadow:var(--shadow-lg);font-family:var(--font-body);color:var(--text-body)} .me-login-card h3,.me-login-title{font-family:var(--font-display);font-size:1.25rem;color:var(--text-dark);margin:0 0 .3rem;text-align:center;font-weight:700} .me-login-card .section-title{justify-content:center} .me-login-sub{font-size:.82rem;color:var(--text-sec);margin-bottom:1rem;text-align:center;line-height:1.45} .me-login-input{width:100%;box-sizing:border-box;padding:.7rem .8rem;margin-bottom:.7rem;border:1px solid var(--border);border-radius:8px;font-size:.95rem;font-family:inherit;background:var(--white);color:var(--text-dark)} .me-login-input:focus{outline:none;border-color:var(--navy)} .me-login-btn{width:100%;padding:.75rem;margin-top:.15rem;border:none;border-radius:8px;background:var(--navy);color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit} .me-login-btn:disabled{opacity:.6;cursor:default} .me-login-err{color:var(--red);font-size:.82rem;min-height:1.1rem;margin-bottom:.4rem;text-align:center;font-weight:600} .me-login-tabrow{display:flex;border-bottom:1px solid var(--border-lt);margin-bottom:1.1rem} .me-login-tabrow button{flex:1;padding:.55rem;border:none;background:none;font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--text-mut)} .me-login-foot{margin-top:.85rem;font-size:.78rem;color:var(--text-sec);text-align:center} .me-login-foot a,.me-login-card a{color:var(--navy);font-weight:700;text-decoration:none} /* Role chooser row — shown when an account holds several roles (index's picker, login.html). A labelled choice with icon + description, not a generic button stack. */ .me-role-btn{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:.7rem .85rem;margin-bottom:.5rem;cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s} .me-role-btn:hover{border-color:var(--navy);background:var(--navy-soft)} .me-role-btn:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)} .me-role-btn .ic{display:inline-flex;align-items:center;color:var(--navy);font-size:1.2rem;flex-shrink:0} .me-role-btn .t{font-weight:700;font-size:.92rem;color:var(--text-dark);line-height:1.25} .me-role-btn .d{font-size:.74rem;color:var(--text-sec);line-height:1.3} .me-role-btn .arr{margin-left:auto;color:var(--text-mut);font-size:1.1rem;flex-shrink:0}