/* ============================================================= Stagia — Colors & Type (v2 · aligned to real Gigflow Live) ------------------------------------------------------------- Two color systems run in parallel: 1. BRAND — amber/gold + pink-red. Used for chrome, brand, CTAs, destructive + LIVE signals. 2. CHORD/SECTION RAINBOW — a 7-hue spectrum the app rotates across chords and sections. The hues share lightness and chroma (OKLCH) so red, blue and green feel like one family even though they're far apart on the wheel. Three stage modes work for any combination (dark default, light indoor, sun outdoor). The wordmark on the supplied logos appears to be a rounded humanist sans, very close to Mulish ExtraBold — we use that as a free substitute. Stage lyrics are MONOSPACE (JetBrains Mono) so chord brackets line up over characters. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------- BRAND ---------- */ --brand-amber-100: #FBE5A7; /* highlight / hover bg */ --brand-amber-200: #F9D77A; /* logo light tip */ --brand-amber-300: #F5C25F; /* PRIMARY brand · "+ New Song" CTA */ --brand-amber-400: #E0A444; /* pressed */ --brand-amber-500: #C7882E; /* logo mid */ --brand-amber-600: #8A5A2A; /* logo dark wave tail */ --brand-amber-700: #4D3416; /* deep shadow */ /* The destructive / "LIVE" / signal pink-red. Pairs with amber. */ --brand-pink-300: #F26A86; --brand-pink-500: #E94560; /* PRIMARY · LIVE, Del, active tab */ --brand-pink-700: #B22A45; /* ---------- InBeat brand — teal/cyan family ---------------- InBeat is the precision sibling. Where Live/Stagia is warm amber stage light and Editor wears the same pink-red as LIVE signals, InBeat steps out of the warm family entirely: teal evokes the metronome panel, the sonar ping, the oscilloscope. Cool, precise, instrument-grade. ---------- */ --inbeat-teal-300: #7FD8D3; /* highlight / hover bg */ --inbeat-teal-500: #2EB5AE; /* PRIMARY · Play, Sauver, wordmark */ --inbeat-teal-700: #1A7F7A; /* pressed */ /* InBeat hardware-LED signal — references physical metronome boxes (Korg / Boss / Tama). Used ONLY on the beat grid. Beat 1 (downbeat) = red LED; beats 2/3/4 = amber LED; off-state = dim socket on dark backgrounds. */ --inbeat-led-red: #FF3B2F; --inbeat-led-red-bg: rgba(255, 59, 47, 0.16); --inbeat-led-amber: #FF9500; --inbeat-led-amber-bg: rgba(255, 149, 0, 0.16); --inbeat-led-off: rgba(255, 255, 255, 0.06); /* Logo gradient — top→bottom of the music note */ --brand-gradient: linear-gradient(180deg, #F9D77A 0%, #F5C25F 32%, #C7882E 68%, #8A5A2A 100%); /* @kind color */ /* ---------- CHORD / SECTION RAINBOW --------------------- 7 hues at oklch(0.76 ~0.16 …) for parity across hue. Use --hue-N tokens whenever you need a colored chord, section pill, or chord-diagram. App assigns them in a rotation; designers should not pick by feel. -------------------------------------------------------- */ --hue-rose: #F26A78; /* H1 · intro / outro / "A" */ --hue-orange: #F49A55; /* H2 · verse 2 / solo */ --hue-amber: #F5C25F; /* H3 · accent — same as brand */ --hue-green: #6BD18A; /* H4 · chorus (all) */ --hue-teal: #4FCFC9; /* H5 · bridge / "B" */ --hue-blue: #5FA3F0; /* H6 · verse / "E" */ --hue-violet: #B284F0; /* H7 · verse 3 / "Fm" */ /* Each hue also has a -bg variant for tinted pill fills (15% alpha of the hue). Used by section chips on dark. */ --hue-rose-bg: rgba(242, 106, 120, 0.18); --hue-orange-bg: rgba(244, 154, 85, 0.18); --hue-amber-bg: rgba(245, 194, 95, 0.18); --hue-green-bg: rgba(107, 209, 138, 0.18); --hue-teal-bg: rgba(79, 207, 201, 0.18); --hue-blue-bg: rgba(95, 163, 240, 0.18); --hue-violet-bg: rgba(178, 132, 240, 0.18); /* ---------- Semantic accents (singular signals) ---------- */ --accent-green: #2EC27E; /* saved / ok */ --accent-red: var(--brand-pink-500); --accent-blue: var(--hue-blue); /* ---------- DARK MODE — stage default ---------- Recalibrated to the LOGO's own background: a deep midnight that is almost black with a hair of violet — not navy. This is what keeps the amber gradient glowing instead of vibrating, exactly as it does on the app-icon artwork. */ --bg-stage: #07060E; /* deepest — full-bleed stage */ --bg-app: #0C0A18; /* app shell — THE logo midnight */ --bg-surface-1: #16131F; /* card, sheet panel */ --bg-surface-2: #211D2F; /* elevated card */ --bg-surface-3: #2C2740; /* hover */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --border-amber: rgba(245, 194, 95, 0.45); --border-pink: rgba(233, 69, 96, 0.55); /* Foreground — warm whites */ --fg-1: #FAFAFA; /* primary */ --fg-2: #BCC4D1; /* secondary */ --fg-3: #7E8896; /* tertiary / labels */ --fg-4: #4D5666; /* placeholder, dividers */ --fg-invert: #0C0A18; /* on amber buttons */ /* Semantic per-content */ --section-label: var(--fg-3); /* ---------- Radii ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---------- Spacing (4pt base) ---------- */ --s-0: 0; /* @kind spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- Shadows ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 16px 40px rgba(0,0,0,0.55); --shadow-pink-glow: 0 0 24px rgba(233, 69, 96, 0.55); --shadow-amber-glow: 0 0 24px rgba(245, 194, 95, 0.30); --shadow-teal-glow: 0 0 24px rgba(46, 181, 174, 0.45); --shadow-led-red: 0 0 12px rgba(255, 59, 47, 0.65); --shadow-led-amber: 0 0 12px rgba(255, 149, 0, 0.55); /* ---------- Type stack ---------- */ --font-display: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ui: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Lyrics + chord brackets share monospace so [A]This aligns vertically with the character A regardless of font width. */ --font-lyric: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ---------- Type scale ---------- */ /* Stage sizes are tuned for a phone/tablet read 50 cm – 1 m away. Floors, not starting points. */ --t-stage-lyric: 20px; /* mono floor on phone */ --t-stage-chord: 20px; --t-stage-section: 12px; /* pill label */ --t-display-xl: 48px; --t-display-lg: 34px; --t-display-md: 26px; --t-h1: 22px; --t-h2: 18px; --t-h3: 16px; --t-body: 15px; --t-body-sm: 13px; --t-caption: 11px; --lh-tight: 1.1; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-body: 1.5; /* @kind font */ --lh-loose: 1.7; /* @kind font */ } /* ============================================================= STAGE MODES — toggle via [data-stage] ============================================================= */ [data-stage="light"] { --bg-stage: #F6F4EE; --bg-app: #ECE9DF; --bg-surface-1: #FFFFFF; --bg-surface-2: #FFFFFF; --bg-surface-3: #E2DECF; --border-subtle: rgba(14, 27, 48, 0.08); --border-default: rgba(14, 27, 48, 0.18); --border-strong: rgba(14, 27, 48, 0.32); --fg-1: #0E1B30; --fg-2: #3A4458; --fg-3: #6A7384; --fg-4: #AEB5C0; --fg-invert: #FAFAFA; /* Tint the hues slightly darker for light bg */ --hue-rose: #D43A52; --hue-orange: #D77536; --hue-amber: #C7882E; --hue-green: #3BAA5F; --hue-teal: #2A9F99; --hue-blue: #2D74C9; --hue-violet: #8A52CE; /* InBeat brand teal — fresher on light surfaces (parity with the app's light theme; validated for AA contrast on light chrome). Dark/stage default keeps --inbeat-teal-500 #2EB5AE. */ --inbeat-teal-500: #0C9488; --inbeat-teal-700: #0A7C72; --shadow-sm: 0 1px 2px rgba(14,27,48,0.06); --shadow-md: 0 4px 12px rgba(14,27,48,0.10); --shadow-lg: 0 16px 40px rgba(14,27,48,0.14); } [data-stage="sun"] { --bg-stage: #FFFFFF; --bg-app: #FFFFFF; --bg-surface-1: #FFFFFF; --bg-surface-2: #FFFFFF; --bg-surface-3: #F0F0F0; --border-subtle: #000000; --border-default: #000000; --border-strong: #000000; --fg-1: #000000; --fg-2: #000000; --fg-3: #000000; --fg-4: #333333; --fg-invert: #FFFFFF; /* In sun mode every chord/section is pure black — colors don't survive direct sunlight on an LCD. The structure still uses pills + bold weight to remain distinguishable. */ --hue-rose: #000000; --hue-orange: #000000; --hue-amber: #000000; --hue-green: #000000; --hue-teal: #000000; --hue-blue: #000000; --hue-violet: #000000; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-pink-glow: none; --shadow-amber-glow: none; } /* ============================================================= ELEMENT DEFAULTS ============================================================= */ html, body { background: var(--bg-app); color: var(--fg-1); font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-lg); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0; } h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.005em; margin: 0; } h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-snug); margin: 0; } h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-snug); margin: 0; } p { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-1); } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; } /* Lyric primitives — share mono font + grid alignment */ .lyric { font-family: var(--font-lyric); font-weight: 400; color: var(--fg-1); } .chord { font-family: var(--font-lyric); font-weight: 700; } ::selection { background: var(--brand-amber-300); color: var(--fg-invert); } /* ============================================================= PRODUCT SKINS — Live / Editor / InBeat ------------------------------------------------------------- Each product is the same chrome with one variable changed: --product-primary. Live = amber, Editor = pink-red (signals authoring), InBeat = violet (drummer / tempo). The whole CTA system + active-tab underline + focus ring picks this up. Apply via: ============================================================= */ :root { --product-primary: var(--brand-amber-300); --product-primary-pressed: var(--brand-amber-400); --product-primary-glow: var(--shadow-amber-glow); --product-primary-fg: var(--fg-invert); /* text on primary */ --product-tint: rgba(245, 194, 95, 0.14); --product-strip: linear-gradient(90deg, #F9D77A, #F5C25F); /* @kind color */ --product-name: 'Live'; /* @kind other */ } [data-product="editor"] { --product-primary: var(--brand-pink-500); --product-primary-pressed: var(--brand-pink-700); --product-primary-glow: var(--shadow-pink-glow); --product-primary-fg: #FFFFFF; --product-tint: rgba(233, 69, 96, 0.14); --product-strip: linear-gradient(90deg, #F26A86, #E94560); /* @kind color */ --product-name: 'Editor'; /* @kind other */ } [data-product="inbeat"] { /* InBeat steps out of the warm amber/pink family. Teal/cyan evokes precision: metronome panel, sonar ping, oscilloscope. LED hardware (red downbeat, amber subdivision) is the InBeat-only signature — used on the beat grid in Live mode. */ --product-primary: var(--inbeat-teal-500); --product-primary-pressed: var(--inbeat-teal-700); --product-primary-glow: var(--shadow-teal-glow); --product-primary-fg: #FFFFFF; --product-tint: rgba(46, 181, 174, 0.14); --product-strip: linear-gradient(90deg, #7FD8D3, #2EB5AE); /* @kind color */ --product-name: 'InBeat'; /* @kind other */ }