/* Ssese Nation theme. Loads after console.css on every workspace page.
   It keeps Droop's layout and motion and changes three things:
   1. Text: near-black everywhere, hierarchy by size and weight (Apple).
   2. Palette: cool Apple neutrals instead of Droop's warm paper.
   3. Accent: one lake teal for selection, links and focus. Actions stay ink. */

:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --radius: 0.75rem;

  --brand: #005551;          /* Ssese teal (logo): selected, current, links, focus */
  --brand-orange: #F7941D;   /* Ssese orange (logo): logo only */
  --brand-cream: #FFFEE2;    /* Ssese cream (logo) */
  --logo-ink: #005551;
  --on-brand: #ffffff;
  --brand-soft: #e2eeed;     /* Background of a selected item */

  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --card: #ffffff;
  --popover: #ffffff;
  --primary: #1d1d1f;
  --primary-foreground: #ffffff;
  --primary-strong: #1d1d1f;
  --secondary: #ededf0;
  --muted: #ededf0;
  --muted-foreground: #1d1d1f; /* Labels and notes are near-black too */
  --text-minor: #6e6e73;       /* Placeholders and disabled only */
  --accent: #e8e8ed;
  --accent-foreground: #1d1d1f;
  --teal-strong: #1d1d1f;
  --border: #e5e5ea;
  --input: #d2d2d7;
  --ring: var(--brand);
  --sidebar: #ececf0;
  --brand-ink: #1d1d1f;
  --brand-paper: #ffffff;
}

:root.dark, .dark {
  --brand: #4fb3a9;
  --logo-ink: #FFFEE2;
  --on-brand: #0b1f1e;
  --brand-soft: #0f2a28;
  --background: #000000;
  --foreground: #f5f5f7;
  --card: #1c1c1e;
  --popover: #232325;
  --primary: #f5f5f7;
  --primary-foreground: #1d1d1f;
  --primary-strong: #f5f5f7;
  --secondary: #2c2c2e;
  --muted: #2c2c2e;
  --muted-foreground: #f5f5f7;
  --text-minor: #a1a1a6;
  --accent: #2c2c2e;
  --accent-foreground: #f5f5f7;
  --teal-strong: #f5f5f7;
  --border: #2c2c2e;
  --input: #3a3a3c;
  --ring: var(--brand);
  --sidebar: #0d0d0e;
  --brand-ink: #f5f5f7;
  --brand-paper: #1d1d1f;
}

/* Text */
body { color: var(--foreground); }
.muted, .sub, .small, .tiny, .mc-note, .mc-label, .crumbs, .sb-label, .sb-sub a, .lib-foot, table.lib th { color: var(--foreground); }
::placeholder { color: var(--text-minor); opacity: 1; }
.sb-label { font-weight: 600; }
.sb-item { font-weight: 400; font-size: 15px; }
.sb-sub a { font-size: 14px; font-weight: 400; }
.sb-sub a.active, .sb-section-open > .sb-item { font-weight: 600; }
.radio-card strong { font-size: 15px; }
.radio-card span { font-size: 13px; color: var(--foreground); }

/* Accent: selection and current place only */
.nav-active .ph, .sb-item.nav-active .ph { color: var(--brand); }
.sb-sub a.active { background: var(--brand-soft); color: var(--foreground); }
.radio-card.on, .dark .radio-card.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.radio-card.on .ph { color: var(--brand); }
a.link, .link, .crumbs a:hover { color: var(--brand); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--brand); }
.rail-step.on .n, .dark .rail-step.on .n { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.pill-tabs .on, .pill-tabs [aria-selected="true"] { color: var(--foreground); }

/* The 2024 logo: teal on light, cream on dark; the orange is fixed in the SVG */
.brand-logo, .k-logo, .logo { color: var(--logo-ink) !important; }
.brand-logo { width: 138px; }

/* Icons sit on their own: no grey boxes or rings around them */
.mc-tile, .dark .mc-tile, .icon-chip, .dark .icon-chip {
  width: auto; height: auto; min-width: 0; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; color: var(--foreground);
}
.mc-tile .ph { font-size: 22px; }
.icon-chip .ph { font-size: 22px; }
.hdr .icon-btn, .hdr .icon-btn.ghost { border: 0; background: none; box-shadow: none; font-size: 19px; }
.hdr .icon-btn:hover { background: var(--muted); }