/* ==========================================================================
   Design system tokens – parity with iOS ThemeManager & ColorTokens
   Values match PubfuseTheme, ClassicTheme, etc. (ThemeProtocol colors).
   Load first (legacy pattern: like /styles.css). Body: data-theme + .dark / .light
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Default: Pubfuse dark (iOS PubfuseTheme theme(for: .dark)) --- */
:root {
  --app-bg: rgb(20, 20, 26);           /* background 0.08,0.08,0.1 */
  --app-bg-elevated: rgb(31, 31, 38);  /* surface 0.12,0.12,0.15 */
  --app-bg-surface: rgb(38, 38, 46);   /* surfaceSecondary 0.15,0.15,0.18 */
  --app-bg-hover: rgb(46, 46, 56);     /* surfaceTertiary 0.18,0.18,0.2 */
  --app-border: rgba(255,255,255,0.08);
  --app-border-subtle: rgba(255,255,255,0.04);
  --app-text: rgb(250, 250, 252);       /* textPrimary 0.98,0.98,0.99 */
  --app-text-secondary: rgb(179, 179, 191); /* textSecondary 0.7,0.7,0.75 */
  --app-text-inverse: rgb(255, 255, 255);   /* text on tint/buttons (iOS textInverse) */
  --app-muted: rgb(128, 128, 140);     /* textTertiary 0.5,0.5,0.55 */
  --app-primary: rgb(255, 51, 0);      /* primary 1,0.2,0 */
  --app-primary-hover: rgb(102, 153, 255); /* active 0.4,0.6,1 */
  --app-primary-muted: rgba(255,51,0,0.15);
  --app-secondary: rgb(153, 102, 255); /* secondary 0.6,0.4,1 */
  --app-accent: rgb(77, 179, 255);     /* accent 0.3,0.7,1 */
  --app-radius: 10px;
  --app-radius-sm: 6px;
  --app-shadow: 0 4px 24px rgba(0,0,0,0.4);
  --app-shadow-lg: 0 8px 40px rgba(0,0,0,0.35);
  --app-transition: 0.2s ease;
  --app-success: rgb(51, 204, 102);
  --app-warning: rgb(255, 179, 51);
  --app-error: rgb(255, 77, 77);
  --app-info: rgb(77, 179, 255);
  /* Typography (iOS PubfuseTheme TypographyTokens) */
  --app-font-size-xl: 40px;
  --app-font-size-l: 32px;
  --app-font-size-h1: 28px;
  --app-font-size-h2: 22px;
  --app-font-size-h3: 18px;
  --app-font-size-body: 16px;
  --app-font-size-subheadline: 15px;
  --app-font-size-caption: 13px;
  --app-font-size-caption2: 11px;
  /* Radius (iOS PubfuseTheme BorderRadiusTokens) */
  --app-radius-button: 10px;
  --app-radius-card: 14px;
  --app-radius-input: 10px;
  --app-radius-badge: 8px;
}

/* Light scheme (body.light) – Pubfuse light */
.app-body.light {
  --app-bg: rgb(250, 250, 252);
  --app-bg-elevated: #ffffff;
  --app-bg-surface: #ffffff;
  --app-bg-hover: rgb(240, 240, 242);
  --app-border: rgba(0,0,0,0.08);
  --app-border-subtle: rgba(0,0,0,0.04);
  --app-text: rgb(26, 26, 31);
  --app-text-secondary: rgb(102, 102, 115);
  --app-muted: rgb(153, 153, 166);
  --app-primary: rgb(26, 128, 230);
  --app-primary-hover: rgb(51, 102, 230);
  --app-primary-muted: rgba(26,128,230,0.1);
  --app-secondary: rgb(128, 77, 230);
  --app-accent: rgb(26, 128, 255);
  --app-shadow: 0 4px 24px rgba(0,0,0,0.15);
  --app-shadow-lg: 0 8px 40px rgba(0,0,0,0.08);
}

/* ========== Pubfuse ========== */
.app-body[data-theme="pubfuse"].dark {
  --app-bg: rgb(20, 20, 26);
  --app-bg-elevated: rgb(31, 31, 38);
  --app-bg-surface: rgb(38, 38, 46);
  --app-text: rgb(250, 250, 252);
  --app-text-secondary: rgb(179, 179, 191);
  --app-primary: rgb(255, 51, 0);
  --app-primary-hover: rgb(102, 153, 255);
  --app-secondary: rgb(153, 102, 255);
  --app-accent: rgb(77, 179, 255);
  --app-border: rgba(255,255,255,0.08);
}
.app-body[data-theme="pubfuse"].light {
  --app-bg: rgb(250, 250, 252);
  --app-bg-elevated: #ffffff;
  --app-bg-surface: #ffffff;
  --app-text: rgb(26, 26, 31);
  --app-text-secondary: rgb(102, 102, 115);
  --app-primary: rgb(26, 128, 230);
  --app-secondary: rgb(128, 77, 230);
  --app-accent: rgb(26, 128, 255);
  --app-border: rgba(0,0,0,0.08);
}

/* ========== Classic ========== */
.app-body[data-theme="classic"].dark {
  --app-bg: #000000;
  --app-bg-elevated: rgb(31, 31, 31);
  --app-bg-surface: rgb(20, 20, 20);
  --app-text: #ffffff;
  --app-text-secondary: rgba(255,255,255,0.7);
  --app-muted: rgba(255,255,255,0.5);
  --app-primary: #007aff;
  --app-primary-hover: #007aff;
  --app-secondary: #af52de;
  --app-accent: rgb(128, 102, 255);
  --app-border: rgba(255,255,255,0.1);
}
.app-body[data-theme="classic"].light {
  --app-bg: #ffffff;
  --app-bg-elevated: rgb(242, 242, 242);
  --app-bg-surface: rgb(230, 230, 230);
  --app-text: #000000;
  --app-text-secondary: rgba(0,0,0,0.7);
  --app-muted: rgba(0,0,0,0.5);
  --app-primary: #007aff;
  --app-secondary: #af52de;
  --app-accent: rgb(128, 102, 255);
  --app-border: rgba(0,0,0,0.1);
}

/* ========== Psy Trance ========== */
.app-body[data-theme="psytrance"].dark {
  --app-bg: rgb(13, 0, 26);
  --app-bg-elevated: rgb(38, 0, 51);
  --app-bg-surface: rgb(26, 0, 38);
  --app-text: rgb(0, 255, 128);
  --app-text-secondary: rgb(128, 255, 179);
  --app-muted: rgb(77, 179, 128);
  --app-primary: rgb(0, 255, 128);
  --app-primary-hover: rgb(0, 255, 128);
  --app-secondary: rgb(255, 0, 204);
  --app-accent: rgb(128, 0, 255);
  --app-border: rgba(128,0,255,0.3);
  --app-success: rgb(0, 255, 128);
  --app-warning: rgb(255, 204, 0);
  --app-error: rgb(255, 0, 77);
  --app-info: rgb(0, 204, 255);
}
.app-body[data-theme="psytrance"].light {
  --app-bg: rgb(250, 242, 255);
  --app-bg-elevated: rgb(242, 230, 250);
  --app-bg-surface: rgb(235, 217, 250);
  --app-text: rgb(51, 0, 102);
  --app-text-secondary: rgb(102, 51, 153);
  --app-primary: rgb(0, 204, 128);
  --app-secondary: rgb(204, 0, 153);
  --app-accent: rgb(128, 0, 204);
  --app-border: rgba(128,0,255,0.2);
}

/* ========== Classic Hip Hop ========== */
.app-body[data-theme="classichiphop"].dark {
  --app-bg: rgb(20, 20, 20);
  --app-bg-elevated: rgb(38, 38, 38);
  --app-bg-surface: rgb(31, 31, 31);
  --app-text: #ffffff;
  --app-text-secondary: rgb(230, 230, 230);
  --app-muted: rgb(179, 179, 179);
  --app-primary: rgb(255, 51, 0);
  --app-primary-hover: rgb(255, 166, 0);
  --app-secondary: rgb(255, 166, 0);
  --app-accent: rgb(0, 204, 102);
  --app-border: rgba(255,166,0,0.3);
  --app-success: rgb(0, 204, 102);
  --app-warning: rgb(255, 166, 0);
  --app-error: rgb(255, 51, 0);
}
.app-body[data-theme="classichiphop"].light {
  --app-bg: rgb(250, 250, 250);
  --app-bg-elevated: rgb(242, 242, 242);
  --app-bg-surface: rgb(235, 235, 235);
  --app-text: #000000;
  --app-text-secondary: rgb(51, 51, 51);
  --app-primary: rgb(255, 51, 0);
  --app-secondary: rgb(255, 166, 0);
  --app-accent: rgb(0, 204, 102);
  --app-border: rgba(255,166,0,0.2);
}

/* ========== Streamer ========== */
.app-body[data-theme="streamer"].dark {
  --app-bg: rgb(23, 18, 33);
  --app-bg-elevated: rgb(36, 28, 46);
  --app-bg-surface: rgb(28, 23, 36);
  --app-text: #ffffff;
  --app-text-secondary: rgb(230, 217, 242);
  --app-muted: rgb(179, 166, 191);
  --app-primary: rgb(148, 33, 245);
  --app-primary-hover: rgb(148, 33, 245);
  --app-secondary: rgb(0, 204, 102);
  --app-accent: rgb(255, 166, 0);
  --app-border: rgba(148,33,245,0.3);
  --app-info: rgb(148, 33, 245);
}
.app-body[data-theme="streamer"].light {
  --app-bg: rgb(250, 247, 255);
  --app-bg-elevated: rgb(242, 237, 250);
  --app-bg-surface: rgb(235, 229, 242);
  --app-text: rgb(26, 13, 38);
  --app-text-secondary: rgb(77, 64, 89);
  --app-primary: rgb(148, 33, 245);
  --app-secondary: rgb(0, 204, 102);
  --app-accent: rgb(255, 166, 0);
  --app-border: rgba(148,33,245,0.2);
}

/* ========== DIY ========== */
.app-body[data-theme="diy"].dark {
  --app-bg: rgb(31, 26, 20);
  --app-bg-elevated: rgb(46, 38, 31);
  --app-bg-surface: rgb(38, 31, 26);
  --app-text: rgb(250, 242, 230);
  --app-text-secondary: rgb(230, 217, 191);
  --app-muted: rgb(179, 166, 140);
  --app-primary: rgb(217, 140, 64);
  --app-primary-hover: rgb(217, 140, 64);
  --app-secondary: rgb(179, 102, 51);
  --app-accent: rgb(242, 179, 77);
  --app-border: rgba(217,140,64,0.3);
}
.app-body[data-theme="diy"].light {
  --app-bg: rgb(250, 245, 240);
  --app-bg-elevated: rgb(242, 237, 230);
  --app-bg-surface: rgb(235, 229, 217);
  --app-text: rgb(51, 38, 26);
  --app-text-secondary: rgb(102, 77, 64);
  --app-primary: rgb(217, 140, 64);
  --app-secondary: rgb(179, 102, 51);
  --app-accent: rgb(242, 179, 77);
  --app-border: rgba(217,140,64,0.2);
}

/* ========== Spiritual ========== */
.app-body[data-theme="spiritual"].dark {
  --app-bg: rgb(20, 26, 31);
  --app-bg-elevated: rgb(31, 36, 46);
  --app-bg-surface: rgb(26, 31, 38);
  --app-text: rgb(242, 242, 250);
  --app-text-secondary: rgb(204, 204, 217);
  --app-muted: rgb(153, 166, 179);
  --app-primary: rgb(153, 179, 230);
  --app-primary-hover: rgb(153, 179, 230);
  --app-secondary: rgb(217, 191, 242);
  --app-accent: rgb(230, 217, 179);
  --app-border: rgba(153,179,230,0.2);
  --app-success: rgb(128, 204, 153);
  --app-info: rgb(153, 179, 230);
}
.app-body[data-theme="spiritual"].light {
  --app-bg: rgb(250, 247, 252);
  --app-bg-elevated: rgb(242, 240, 247);
  --app-bg-surface: rgb(235, 232, 240);
  --app-text: rgb(38, 46, 56);
  --app-text-secondary: rgb(77, 89, 102);
  --app-primary: rgb(153, 179, 230);
  --app-secondary: rgb(217, 191, 242);
  --app-accent: rgb(230, 217, 179);
  --app-border: rgba(153,179,230,0.15);
}

/* ========== Live Music ========== */
.app-body[data-theme="livemusic"].dark {
  --app-bg: rgb(15, 15, 20);
  --app-bg-elevated: rgb(31, 26, 31);
  --app-bg-surface: rgb(28, 26, 28);
  --app-text: #ffffff;
  --app-text-secondary: rgb(242, 230, 217);
  --app-muted: rgb(179, 166, 153);
  --app-primary: rgb(255, 89, 51);
  --app-primary-hover: rgb(255, 89, 51);
  --app-secondary: rgb(255, 204, 0);
  --app-accent: rgb(230, 51, 128);
  --app-border: rgba(255,89,51,0.4);
  --app-success: rgb(51, 230, 102);
  --app-warning: rgb(255, 204, 0);
  --app-error: rgb(255, 51, 77);
}
.app-body[data-theme="livemusic"].light {
  --app-bg: rgb(252, 250, 250);
  --app-bg-elevated: rgb(245, 240, 240);
  --app-bg-surface: rgb(237, 232, 232);
  --app-text: rgb(26, 26, 31);
  --app-text-secondary: rgb(77, 64, 51);
  --app-primary: rgb(255, 89, 51);
  --app-secondary: rgb(255, 204, 0);
  --app-accent: rgb(230, 51, 128);
  --app-border: rgba(255,89,51,0.25);
}

/* ========== Pubfuse Dark ========== */
.app-body[data-theme="pubfuse-dark"].dark {
  --app-bg: rgb(26, 26, 26);
  --app-bg-elevated: rgb(20, 20, 26);
  --app-bg-surface: rgb(20, 20, 26);
  --app-text: rgb(250, 250, 250);
  --app-text-secondary: rgb(191, 191, 191);
  --app-muted: rgb(140, 140, 140);
  --app-primary: rgb(255, 51, 0);
  --app-primary-hover: rgb(77, 153, 242);
  --app-secondary: rgb(128, 77, 242);
  --app-accent: rgb(0, 179, 255);
  --app-border: rgba(255,255,255,0.06);
  --app-success: rgb(0, 255, 128);
  --app-warning: rgb(255, 204, 0);
  --app-error: rgb(255, 51, 102);
  --app-info: rgb(0, 179, 255);
}
.app-body[data-theme="pubfuse-dark"].light {
  --app-bg: #000000;
  --app-bg-elevated: rgb(38, 38, 38);
  --app-bg-surface: rgb(46, 46, 46);
  --app-text: rgb(242, 242, 242);
  --app-text-secondary: rgb(179, 179, 179);
  --app-primary: rgb(255, 51, 0);
  --app-secondary: rgb(102, 51, 204);
  --app-accent: rgb(0, 102, 242);
  --app-border: rgba(0,0,0,0.06);
}

/* ========== Monochromatic ========== */
.app-body[data-theme="monochromatic"].dark {
  --app-bg: rgb(13, 13, 13);
  --app-bg-elevated: rgb(26, 26, 26);
  --app-bg-surface: rgb(31, 31, 31);
  --app-text: rgb(242, 242, 242);
  --app-text-secondary: rgb(179, 179, 179);
  --app-muted: rgb(128, 128, 128);
  --app-primary: rgb(179, 179, 179);
  --app-primary-hover: rgb(204, 204, 204);
  --app-primary-muted: rgba(255,255,255,0.1);
  --app-secondary: rgb(128, 128, 128);
  --app-accent: rgb(204, 204, 204);
  --app-border: rgba(255,255,255,0.1);
  --app-success: rgb(153, 153, 153);
  --app-warning: rgb(179, 179, 179);
  --app-error: rgb(128, 128, 128);
  --app-info: rgb(166, 166, 166);
}
.app-body[data-theme="monochromatic"].light {
  --app-bg: rgb(250, 250, 250);
  --app-bg-elevated: #ffffff;
  --app-bg-surface: rgb(242, 242, 242);
  --app-text: rgb(26, 26, 26);
  --app-text-secondary: rgb(102, 102, 102);
  --app-muted: rgb(128, 128, 128);
  --app-primary: rgb(77, 77, 77);
  --app-primary-hover: rgb(102, 102, 102);
  --app-primary-muted: rgba(0,0,0,0.08);
  --app-secondary: rgb(128, 128, 128);
  --app-accent: rgb(51, 51, 51);
  --app-border: rgba(0,0,0,0.1);
  --app-success: rgb(102, 102, 102);
  --app-warning: rgb(77, 77, 77);
  --app-error: rgb(128, 128, 128);
  --app-info: rgb(89, 89, 89);
}