/* ═══════════════════════════════════════════════════════════════
   StudySmarter Brand Layer — CM Cockpit
   Brand Guidelines v1.0 (Feb 2026)
   Loaded AFTER cockpit.css to override SalesOS defaults.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Primary brand ── */
  --sm-blue: #1300FF;
  --sm-blue-80: #145CFF;
  --sm-blue-60: #2870FF;
  --sm-blue-40: #3C84FF;
  --sm-lime: #C6FA02;
  --sm-hotrod: #FF5C41;

  /* ── Neutrals ── */
  --sm-white: #FCFCFD;
  --sm-stone: #F6F4F1;
  --sm-charcoal: #232323;

  /* ── Greys ── */
  --sm-grey-600: #4F4F4F;
  --sm-grey-500: #7B7B7B;
  --sm-grey-400: #A7A7A7;
  --sm-grey-200: #D3D3D3;

  /* ── Stone scale ── */
  --sm-stone-dark: #ACA59B;
  --sm-stone-800: #BBB5AC;
  --sm-stone-600: #CAC5BD;
  --sm-stone-400: #D8D4CF;
  --sm-stone-200: #E7E4E0;

  /* ── Fonts ── */
  --sm-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sm-font-body: 'Inter Tight', system-ui, sans-serif;
  --sm-font-mono: 'DM Mono', ui-monospace, monospace;

  /* ── Remap SalesOS cockpit.css tokens to brand ── */
  --primary: var(--sm-blue);
  --primary-fg: #ffffff;
  --primary-50: rgba(19, 0, 255, 0.06);
  --accent: var(--sm-lime);
  --bg: var(--sm-white);
  --bg-grad: var(--sm-white);
  --fg: var(--sm-charcoal);
  --fg-soft: var(--sm-grey-500);
  --muted: var(--sm-grey-500);
  --muted-fg: var(--sm-grey-500);
  --card: #ffffff;
  --border: var(--sm-stone-200);
  --secondary: var(--sm-stone);
  --destructive: var(--sm-hotrod);
  --success: var(--sm-lime);
}

/* ── Base typography ── */
body {
  font-family: var(--sm-font-body);
  color: var(--sm-charcoal);
  background: var(--sm-white);
  letter-spacing: -0.01em; /* -1% body tracking */
}

/* Headings → Plus Jakarta Sans, tight tracking */
.brand,
h1, h2, h3,
.q-title,
.mgr-card-h,
.kanban-col-h,
.tp-title,
.inbox-rail-h,
.queue-group-h,
.bulk-bar b,
.section-title {
  font-family: var(--sm-font-heading) !important;
  letter-spacing: -0.02em; /* -2% heading tracking */
  font-weight: 700;
}

.brand { font-weight: 800; letter-spacing: -0.03em; }

/* Tabs → Plus Jakarta SemiBold */
.tab { font-family: var(--sm-font-heading); font-weight: 600; letter-spacing: -0.01em; }
.tab.active { color: var(--sm-blue); }

/* ── Mono for technical / numeric content ── */
.q-conf,
.q-pipe,
.q-pipe .pipe-step,
.auto-gauge,
.badge-count,
.pill,
.mgr-table td:not(:first-child),
.ag-saved,
.q-meta {
  font-family: var(--sm-font-mono);
  letter-spacing: 0;
}
.q-pipe b { font-family: var(--sm-font-heading); }

/* ── Brand logo block in topbar ── */
.brand .logo,
.brand-mark {
  background: var(--sm-blue);
}

/* ── Buttons ── */
.btn-primary {
  background: var(--sm-blue);
  color: #fff;
  border: 1px solid var(--sm-blue);
  font-family: var(--sm-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 8px;
}
.btn-primary:hover { background: var(--sm-blue-80); border-color: var(--sm-blue-80); }
.btn-secondary {
  background: #fff;
  color: var(--sm-charcoal);
  border: 1px solid var(--sm-stone-400);
  font-family: var(--sm-font-heading);
  font-weight: 600;
  border-radius: 8px;
}
.btn-secondary:hover { background: var(--sm-stone); border-color: var(--sm-stone-600); }

/* ── Lime accent for "ready"/success affordances ── */
.bulk-bar {
  background: linear-gradient(100deg, var(--sm-blue) 0%, var(--sm-blue-60) 100%);
  color: #fff;
  border: none;
}
.bulk-bar .btn-bulk {
  background: var(--sm-lime);
  color: var(--sm-charcoal);
  font-family: var(--sm-font-heading);
  font-weight: 700;
}
.bulk-bar .btn-bulk:hover { background: #d4ff3a; }

/* Confidence chips */
.q-conf.high { background: rgba(198,250,2,0.22); color: #3d5800; }
.q-conf.low { background: rgba(255,92,65,0.16); color: #a02d18; }

/* Ready cards → lime left-border, Urgent → hotrod */
.q-card.ready { border-left: 3px solid var(--sm-lime); }
.q-card.urgent { border-left: 3px solid var(--sm-hotrod); }
.q-icon.ready { background: rgba(198,250,2,0.18); }
.q-icon.urgent { background: rgba(255,92,65,0.14); }

/* ── Topbar ── */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--sm-stone-200);
}
.brand .brand-sub {
  background: var(--sm-lime);
  color: var(--sm-charcoal);
  font-family: var(--sm-font-mono);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Auto-gauge bar in brand gradient */
.auto-gauge .ag-bar > div {
  background: linear-gradient(90deg, var(--sm-blue) 0%, var(--sm-lime) 100%);
}
.auto-gauge .ag-saved { color: var(--sm-blue); }

/* ── Banner ── */
.timing-banner {
  background: var(--sm-charcoal);
  color: var(--sm-white);
  border: none;
}
.timing-banner .btn-primary { background: var(--sm-lime); color: var(--sm-charcoal); border-color: var(--sm-lime); }

/* ── Pills ── */
.pill.ok { background: rgba(198,250,2,0.22); color: #3d5800; }
.pill.warn { background: rgba(255,92,65,0.16); color: #a02d18; }

/* ── Tab active indicator in Smarter Blue ── */
.tab.active::after { background: var(--sm-blue); }

/* ── Cards: warm stone surfaces ── */
.q-card, .mgr-card, .tp-card, .bootstrap-card, .kanban-card {
  border-color: var(--sm-stone-200);
}
.q-body .q-pipe { background: var(--sm-stone); }
.q-body .q-pipe .pipe-step.tool { background: rgba(19,0,255,0.07); color: var(--sm-blue); border-color: rgba(19,0,255,0.15); }
.q-body .q-pipe .pipe-step.out { background: rgba(198,250,2,0.18); color: #3d5800; border-color: rgba(198,250,2,0.4); }

/* ── Inbox rail active = Smarter Blue ── */
.rail-cat.active { background: var(--primary-50) !important; box-shadow: inset 3px 0 0 var(--sm-blue); }

/* ── Scrollbars subtle brand ── */
::-webkit-scrollbar-thumb { background: var(--sm-stone-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sm-stone-dark); }

/* ── Live toggle in brand ── */
#live-mode:checked + .slider { background: var(--sm-lime); }
#live-mode:checked + .slider::before { background: var(--sm-charcoal); }

/* ── KPI tiles / numbers → mono ── */
.auto-gauge b, .mgr-card [style*="font-size:24px"], .mgr-card [style*="font-size:28px"] {
  font-family: var(--sm-font-mono);
}