/* 50-50's look on this platform (Ben, Oct 1: fonts and colors exactly like the live
   50-50 app). Loads last: after the page's own styles, columbia-theme.css and the
   generated page layer (pages/<page>.css, scripts/build_brand_theme.py), which already
   copies creator-crm's colors and type wherever it styled the same element. This file
   only covers what creator-crm never had (Music-only tokens and elements). */

html:root {
  color-scheme: dark;

  /* creator-crm's palette (also emitted by the page layer; repeated so Music-only
     pages without a creator-crm twin get it too). */
  --bg: #0c0c0e;
  --surface: #141417;
  --surface2: #1c1c21;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.15);
  --text: #f0ede8;
  --muted: #6b6870;
  --accent: #ff6d4d;
  --accent-dim: rgba(255, 109, 77, 0.12);
  --tiktok: #a78bfa;  --tiktok-dim: rgba(167, 139, 250, 0.12);  --tt: #a78bfa;
  --ig: #fb923c;      --ig-dim: rgba(251, 146, 60, 0.12);
  --email: #38bdf8;   --email-dim: rgba(56, 189, 248, 0.12);
  --deal: #4ade80;    --deal-dim: rgba(74, 222, 128, 0.1);
  --danger: #f87171;

  /* Music-only tokens, mapped onto that palette. */
  --panel: #141417;
  --panel-2: #1c1c21;
  --divider: rgba(255, 255, 255, 0.07);
  --accent-700: #ff6d4d;
  --accent-800: #ff6d4d;
  --accent-100: rgba(255, 109, 77, 0.12);
  --accent-2: #ff6d4d;
  --neutral-100: #141417;
  --neutral-200: #1c1c21;
  --neutral-300: #26262c;
  --neutral-400: #4a4850;
  --neutral-500: #6b6870;
  --neutral-600: #6b6870;
  --neutral-700: #a9a6ae;
  --neutral-800: #f0ede8;
  --brand-ink: #f0ede8;
  --brand-shell: #1c1c21;
  --brand-mist: rgba(255, 255, 255, 0.04);
  --brand-haze: rgba(255, 255, 255, 0.06);
  --brand-flare: rgba(255, 109, 77, 0.18);
  --shadow-sm: 0 0 #0000;  /* not "none": card rules list it after the genre stripe */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);

  /* Tracker / share charts (read by their scripts; Music keeps its own colors). */
  --chart-views: #22c55e;
  --chart-likes: #3b82f6;
  --chart-comments: #a78bfa;
  --chart-shares: #1e3a8a;
  --chart-engagement: #f59e0b;
  --chart-ink: #6b6870;
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-tooltip-bg: #141417;
  --chart-tooltip-border: rgba(255, 255, 255, 0.07);
  --chart-tooltip-ink: #f0ede8;
}

html { background: var(--bg) !important; }
body { background-color: var(--bg) !important; color: var(--text); }


/* Music's page titles (.page-head h1) = creator-crm's .header h1: Syne, 34px, bold. */
.page-head h1,
.header h1,
.ob-head h1,
.main > h1,
.wrap > h1 {
  font-family: "Syne", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}
.kicker,
.eyebrow,
.page-head .eyebrow,
.hero-eyebrow,
.page-count {
  font-family: "DM Mono", monospace !important;
  color: var(--muted) !important;
  letter-spacing: 1.5px !important;
}

/* Views tile + chart line: creator-crm's green. */
.metric-tile[data-metric="views"] { --mc: #22c55e !important; }

/* The rail is the page color, as in creator-crm. */
.sidebar { background: var(--bg) !important; border-right-color: var(--border) !important; }

/* Creators cards (Music's card layout): numbers in DM Mono like creator-crm's cards. */
.card .metric-val { font-family: "DM Mono", monospace !important; font-weight: 500 !important; }
.card .metric-cap { font-family: "DM Mono", monospace !important; color: var(--muted) !important; font-size: 9px !important; white-space: nowrap; }

/* Client share page title: creator-crm's .header h1 (24px), not Music's display size. */
.header.share-header h1 {
  font-family: "Syne", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}

/* Creator card tags: Music tints every tag with its accent; creator-crm colored them by type. */
.badges .badge-niche { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.badges .badge-deal { background: var(--deal-dim); color: var(--deal); }
.badges .badge-payment { background: rgba(255, 109, 77, 0.12); color: var(--accent); }
.badges .badge-management { background: rgba(56, 189, 248, 0.12); color: var(--email); }

/* Pages creator-crm never had (Settings, Approvals, batch review): its title style,
   not Music's all-caps display type. */
.head h1 {
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.team-heading h2,
.section-head h2,
.delivery-top h2,
.role-card h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Inbox: messages we sent sit on a lighter panel than the creator's (Ben, Oct 1 2026).
   The generated dark version of presentation.css's light gray (#17171b) barely shows
   on this background, so lift it a step. */
html .inbox-workspace .ob-msg.out { background-color: rgba(255, 255, 255, 0.055); }
html .inbox-workspace .ob-msg.out .ob-msg-dir { background-color: rgba(255, 255, 255, 0.09); border-color: transparent; color: #d6dde8; }