/*
  Lazy Lopez: Guitar — the one site theme, light and dark.
  Follows the visitor's system appearance (prefers-color-scheme); there is
  no picker and no JavaScript. Light is the default when no preference is
  expressed. Colours mirror the app's LazyLopezTheme.swift:

    token      app token (light / dark)
    --ch-900   background        #F5F0E6 / #151312
    --ch-800   cardBackground    #EDE8DF / #201D1B
    --ch-700   surface           #E0D9CC / #2F2C28
    --ch-600   surfaceRaised     #C8BFB0 / #423E38   (also borderStrong in light)
    --ch-500   textTertiary      #5D6457 / #B8AF9F
    --ch-400   textSecondary     #424A3D / #D9CDB8
    --ch-300   textPrimary       #292F29 / #F5EBD8   (ink / ivory)
    --ru-500   accent            #A64D37 / #DF5A3C
    --ru-400   accent as text    #A64D37 / #E4745A   (dark = accentHover)
    --ru-600   accentPressed     #7F3B2A / #DC4B2A
    --ru-hover accentHover       #C05A40 / #E4745A   (fills only: 3.9:1 as text on paper)
    --on-accent textOnAccent     #F5F0E6 / #292F29   (paper / ink)
    --cr-100   light text on dark fills: paper / ivory

  The ramp is inverted between variants: 900 is always the page background
  and 300 the primary text.
*/

:root {
  color-scheme: light dark;

  /* Typography */
  --f-b: 'DM Sans', -apple-system, system-ui, sans-serif;
  --f-m: 'DM Mono', 'SF Mono', monospace;
  --f-d: 'Bricolage Grotesque', -apple-system, system-ui, sans-serif;
  --f-h: 'Caveat', cursive;

  /* ── LIGHT (default) ─────────────────────────────────── */
  --ch-900: #F5F0E6;
  --ch-800: #EDE8DF;
  --ch-700: #E0D9CC;
  --ch-600: #C8BFB0;
  --ch-500: #5D6457;
  --ch-400: #424A3D;
  --ch-300: #292F29;

  --ru-500: #A64D37;
  --ru-400: #A64D37;
  --ru-600: #7F3B2A;
  --ru-hover: #C05A40;
  --ru-rgb: 166,77,55;          /* accent as r,g,b for rgba() tints */
  --on-accent: #F5F0E6;

  --cr-100: #F5F0E6;
  --cr-200: #EDE8DF;
  --cr-400: #C8BFB0;

  --accent-cool: #5A7A8A;       /* infoAccent */
  --accent-success: #5A8A6A;    /* successAccent */

  --glass-1: rgba(255,252,246,0.85);
  --glass-2: rgba(255,252,246,0.65);
  --glass-3: rgba(255,252,246,0.45);
  --glass-bg: rgba(245,240,230,0.97);
  --glass-bg-strong: rgba(237,232,223,0.99);

  --line-rgb: 41,47,41;         /* hairline base: ink in light, white in dark */
  --nav-rgb: 245,240,230;
  --island: #201D1B;            /* surfaces that stay dark in both variants */
  --island-hover: #2F2C28;

  --shadow-sm: 0 1px 4px rgba(90,70,50,0.10);
  --shadow-md: 0 3px 12px rgba(90,70,50,0.14);
  --shadow-lg: 0 6px 24px rgba(90,70,50,0.16);
  --shadow-xl: 0 12px 40px rgba(90,70,50,0.20);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ch-900: #151312;
    --ch-800: #201D1B;
    --ch-700: #2F2C28;
    --ch-600: #423E38;
    --ch-500: #B8AF9F;
    --ch-400: #D9CDB8;
    --ch-300: #F5EBD8;

    --ru-500: #DF5A3C;
    --ru-400: #E4745A;
    --ru-600: #DC4B2A;
    --ru-hover: #E4745A;
    --ru-rgb: 223,90,60;
    --on-accent: #292F29;

    --cr-100: #F5EBD8;
    --cr-200: #D9CDB8;
    --cr-400: #B8AF9F;

    --accent-cool: #5A8FA8;
    --accent-success: #6B9D7A;

    --glass-1: rgba(66,62,56,0.45);
    --glass-2: rgba(66,62,56,0.25);
    --glass-3: rgba(66,62,56,0.15);
    --glass-bg: rgba(32,29,27,0.90);
    --glass-bg-strong: rgba(32,29,27,0.92);

    --line-rgb: 255,255,255;
    --nav-rgb: 21,19,18;
    --island: #201D1B;
    --island-hover: #2F2C28;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.15);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.25);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);
  }
}

/* ══════════════════════════════════════════════════════════
   LIGHT-ONLY RULES for the CSS-drawn app mockups.
   The mockup markup is written for the dark variant (ivory text,
   white-alpha glass); these remap it for paper backgrounds.
══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {

/* ── LIGHT VARIANT: cr-100 TEXT OVERRIDES ───────────────────────
   In the dark variant, cr-100 is ivory on dark backgrounds.
   In the light variant these elements need ink text instead.
──────────────────────────────────────────────────────────── */

/* All major display/heading text that uses cr-100 */
.home-greeting,
.home-avatar,
.nav-title,
.nav-back,
.lib-title,
.ideas-title,
.player-name,
.timer-big,
.heading,
.ctx-title,
.es-empty-title,
.error-title,
.ended-title,
.song-name, .song-confirmed-name,
.song-info .song-name,
.drill-name, .drill-active-name,
.loop-name,
.idea-title,
.sheet-nav-title,
.chord-chip-name,
.kp-key-note,
.kp-preview-name,
.meta-val,
.take-label,
.lib-title,
/* Practice hub cards */
.action-name, .practice-card-title,
/* Countdown ring number */
.countdown-num,
/* Page labels */
.page-label-text {
  color: var(--ch-300) !important;
}

/* Body/secondary text that uses cr-100 */
.song-confirmed-artist,
.ctx-sub,
.player-meta,
.ideas-count,
.card-count,
.setting-label,
.setting-val,
.feel-pill,
.fpill,
.adj-btn,
.lib-sessions {
  color: var(--ch-400) !important;
}

/* Practice hub */
.practice-hub-title { color: var(--ch-300) !important; }
.practice-card-title { color: var(--ch-300) !important; }

/* Resource links */
.resource-name { color: var(--ch-300) !important; }

/* Onboarding specific classes */
.screen-title,
.option-name,
.badge-ready,
.badge-date,
.done-title,
.wm-top,
.wm-bot,
.welcome-headline,
.preview-text,
.song-name {
  color: var(--ch-300) !important;
}

.screen-sub { color: var(--ch-400) !important; }

/* Jam countdown — needs dark bg to stay dark in light mode */
[data-screen-label="Jam Countdown"] > div[style*="ch-900"],
[data-screen-label="Jam Countdown"] [style*="background:var(--ch-900)"],
[data-screen-label="Jam Countdown"] [style*="background: var(--ch-900)"] {
  background: #201D1B !important;
}

/* Countdown is a dark island in the light variant — restore light text colors inside */
[data-screen-label="Jam Countdown"] [style*="color:var(--cr-100)"],
[data-screen-label="Jam Countdown"] [style*="color: var(--cr-100)"] {
  color: #F5F0E6 !important;
}
[data-screen-label="Jam Countdown"] [style*="color:var(--ch-400)"],
[data-screen-label="Jam Countdown"] [style*="color: var(--ch-400)"] {
  color: #D9CDB8 !important;
}
[data-screen-label="Jam Countdown"] [style*="color:var(--ch-500)"],
[data-screen-label="Jam Countdown"] [style*="color: var(--ch-500)"] {
  color: #B8AF9F !important;
}

/* Discard overlay is dark even in the light variant — restore light text inside */
.discard-overlay [style*="color:var(--cr-100)"],
.discard-overlay [style*="color: var(--cr-100)"] {
  color: #F5F0E6 !important;
}
.discard-overlay [style*="color:var(--ch-400)"],
.discard-overlay [style*="color: var(--ch-400)"] {
  color: #D9CDB8 !important;
}
.discard-overlay [style*="color:var(--ch-500)"],
.discard-overlay [style*="color: var(--ch-500)"] {
  color: #B8AF9F !important;
}

/* Paused-overlay (Practice drill pause sheet) — dark overlay needs light text */
.paused-overlay [style*="color:var(--cr-100)"],
.paused-overlay [style*="color: var(--cr-100)"] {
  color: #F5F0E6 !important;
}
.paused-overlay [style*="color:var(--ch-400)"],
.paused-overlay [style*="color: var(--ch-400)"] {
  color: #D9CDB8 !important;
}
.paused-overlay [style*="color:var(--ch-500)"],
.paused-overlay [style*="color: var(--ch-500)"] {
  color: #D9CDB8 !important;
}
.paused-overlay .paused-title { color: #F5F0E6 !important; }
.paused-overlay .paused-sub { color: #D9CDB8 !important; }

/* Songs empty state inline cr-100 */
[data-screen-label="Songs Library Empty"] [style*="color:var(--cr-100)"],
[data-screen-label="Songs Library Empty"] [style*="color: var(--cr-100)"] {
  color: var(--ch-300) !important;
}

/* Inline cr-100 overrides across all screens */
[style*="color:var(--cr-100)"] { color: var(--ch-300) !important; }
[style*="color: var(--cr-100)"] { color: var(--ch-300) !important; }

/* Outline/ghost buttons — need dark text on light bg */
.btn-outline,
.btn-outline-rec,
.err-btn-outline,
.btn-o {
  color: var(--ch-300) !important;
  border-color: var(--ch-600) !important;
}

/* Outline-button icon strokes also hardcoded cream — make visible on light bg */
.btn-o svg path,
.btn-outline svg path,
.btn-outline-rec svg path,
.err-btn-outline svg path {
  stroke: var(--ch-300) !important;
}

/* Error hand text */
.error-hand, .es-empty-hand, .ended-hand {
  color: var(--ch-500) !important;
}

/* Permission steps text */
.perm-text strong { color: var(--ch-300) !important; }
.perm-text span { color: var(--ch-400) !important; }

/* Cream mic image is invisible on light bg — darken it to ink */
.mic-area img[alt="Microphone"] {
  filter: brightness(0.18) saturate(1.4);
}

/* Nav back arrow SVGs hardcode cream stroke — make visible on light bg */
.nav-back svg path,
.nav-back svg line,
.nav-back svg polyline,
.sheet-back svg path,
.sheet-back svg line,
.sheet-back svg polyline {
  stroke: var(--ch-300) !important;
}

/* Settings row value badges — hardcoded light tan in screen HTML, invisible on light bg */
.settings-val-blue { color: var(--ru-500) !important; }

/* Home / Settings cream-on-cream text — remap to ink */
.sbar-time,
.action-title,
.recent-name,
.profile-name,
.settings-row-name,
.empty-title,
.editor-title,
.bpm-big,
.scale-name-big,
.tname,
.estat-val,
.kp-title,
.recent-empty-title,
.rec-time,
.scribble-text,
.metro-bpm,
.metro-tap-title,
.now-name,
.scale-name,
.scale-detail-name,
.chord-detail-name,
.voicing-name,
.chord-cell-name,
.scale-cell-name,
.note-letter,
.setting-card-value,
.tuning-card-value,
.chord-note-pill,
.scale-note,
.bpm-adj-btn,
.metro-ctrl,
.text-input,
.kb-key,
.complete-title,
.stat-val,
.drill-active-name,
.paused-title,
.bpm-display,
.ring-time,
.instruction-text {
  color: var(--ch-300) !important;
}

/* Done-screen chips use cream text — need dark text + visible border on light bg */
.done-chips .chip {
  color: var(--ch-300) !important;
  border-color: var(--ch-600) !important;
}

/* ──────────────────────────────────────────────────────────
   CREAM-ON-CREAM REMAPS
   On the light paper bg, --cr-100 (warm white) and
   --cr-200 (cream) used as backgrounds or text become
   invisible. Remap to dark warm tones for visibility.
   ────────────────────────────────────────────────────────── */

/* Drum sequencer cells — kick + hi-hat (Jam Drum Editor / Band Editor) */
.dc.k { background: var(--ch-300) !important; }
.dc.h { background: var(--ch-500) !important; }

/* Inline cream backgrounds across all screens
   (band-editor pads, drum dots, big cells, etc.) */
[style*="background:var(--cr-100)"],
[style*="background: var(--cr-100)"] { background: var(--ch-300) !important; }
[style*="background:var(--cr-200)"],
[style*="background: var(--cr-200)"] { background: var(--ch-500) !important; }

/* Inline cream text — Learn.html "Wish You Were Here" meta row, etc. */
[style*="color:var(--cr-200)"],
[style*="color: var(--cr-200)"] { color: var(--ch-300) !important; }

/* "Active state" pills — repaint cream-on-cream to ink pill with cream text
   so the active treatment is still a visible filled shape */
.fpill.active,
.mpill.on,
.ppill.on,
.metro-opt-btn.active,
.lib-tab.active {
  background: var(--ch-300) !important;
  color: var(--cr-100) !important;
  border-color: var(--ch-300) !important;
}

}