/* ============================================================
   THREADSPORE THEME LAYER - v0.2.0
   Loaded LAST (after lm.css + atlas-af.css) so it wins the
   cascade. This is the warm-light Threadspore look from
   assets/mockups/threadspore-mockups-v2.html:
   warm white paper, deep green ink, emerald action color,
   Google Sans Flex everywhere, light mode only.

   Org skinning (later): the org layer will override
   --accent / --accent-deep / --bg per organization. Keep
   product-wide colors expressed through these tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,300..800&display=swap');

/* ---------- tokens: force the warm light palette ---------- */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Threadspore is light-only for now. Dark tokens are pinned to the
     light values so any lingering data-theme="dark" state renders
     identically instead of half-dark. */
  --bg:            #f7f5f0;
  --bg2:           #efece4;
  --bg3:           #ffffff;
  --bg-elevated:   #ffffff;
  --content-bg:    #f7f5f0;
  --card-bg:       #ffffff;

  --ink:           #26302a;
  --muted:         #57645c;

  --border:        #ddd9ce;
  --border2:       #e6e2d8;
  --border-hair:   #eae7de;
  --border-strong: #26302a;

  /* Emerald replaces coral as the default action color. Deep value
     is AAA on paper; base is AA for white button text. */
  --accent:        #1d7a4e;
  --accent-deep:   #14522f;

  --font-sans: 'Google Sans Flex', 'Outfit', system-ui, -apple-system, sans-serif;
  /* Steven's call 2026-07-02: Google Sans Flex for everything,
     including surfaces that used the mono label face. */
  --font-mono: 'Google Sans Flex', 'IBM Plex Mono', ui-monospace, monospace;

  --radius:    12px;
  --radius-lg: 18px;

  color-scheme: light;
}

/* ---------- base type: bigger floor for the audience ---------- */
html { font-size: 17px; }
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: #f7f5f0 !important;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ONE typeface (Steven): Google Sans Flex for everything. Component
   CSS inherited from LMD/AF declares its own font-family ('Outfit',
   'Lora', mono stacks) in dozens of places - this universal rule
   outranks them all, including inline styles without !important. */
body, body *, button, input, select, textarea {
  font-family: var(--font-sans) !important;
}

/* Mono-labeled chrome bits (eyebrows, readouts) keep their tracking
   but drop to the sans per the one-typeface decision. */
code, kbd, samp, pre, .mono, [class*="mono"] {
  font-family: var(--font-mono);
}

/* ---------- light-only: hide the theme picker ---------- */
/* Profile > Appearance keeps the accent swatches; the Light/Dark/Auto
   segmented control goes away while Threadspore is light-only. */
button.appearance-seg { display: none !important; }

/* ============================================================
   DESIGN PASS (Steven, 2026-07-02 evening): "totally new modern
   startup, not a reskin of Atlas." The Artifact Futurism language -
   dossier readouts, mono instrument labels, drawn ink borders,
   blueprint dashes, document watermark - is dismantled below.
   Plus: 18px type floor everywhere, for the elders.
   ============================================================ */

/* ============================================================
   TYPOGRAPHY HIERARCHY (Steven, 2026-07-02 night)
   Base 16px - Google Sans Flex renders generously, so 16 reads
   like most fonts' 18. NOTHING renders below 1rem (16px).
   Hierarchy comes from a small, consistent scale + weight +
   color, never from shrinking text:

     page title    2rem      700   (h1)
     section head  1.375rem  700   (h2 / card group headings)
     card title    1.125rem  700
     body          1rem      400
     supporting    1rem      400   color: var(--muted)
     labels        1rem      600   color: var(--muted)
   ============================================================ */
html { font-size: 16px; }

h1 { font-size: 2rem !important; }
h2 { font-size: 1.375rem !important; }
h3 { font-size: 1.125rem !important; }

/* AF used sub-1rem mono metas everywhere. Raise every small-text
   pattern to the floor. Deliberately blunt selectors: readability
   beats micro-hierarchy for this audience. */
small, .small,
[class*="-sub"], [class*="-meta"], [class*="-hint"], [class*="-note"],
[class*="eyebrow"], [class*="kicker"], [class*="-label"],
.atlas-af-label, .profile-hint, .profile-card-sub {
  font-size: 1rem !important;
  line-height: 1.45;
}

/* Chrome panels missed by the first floor pass: the avatar popover
   and the notification bell panel. Everything inside them sits at
   the body size; bold + muted color carry the hierarchy. */
.lm-user-popover, .lm-user-popover *,
[class*="lm-bell"], [class*="lm-bell"] *,
[class*="notif"], [class*="notif"] * {
  font-size: 1rem !important;
}

/* ---------- kill the instrument-panel language ---------- */
/* Mono readout chips, dossier clusters, uppercase tracking. */
.lm-af-dossier, .lm-af-readout, .atlas-af-readout { display: none !important; }

.atlas-af-label, [class*="eyebrow"], [class*="kicker"] {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
  color: var(--muted);
}

/* The home greeting replacing the member-ID readout. */
.ts-greeting {
  font-size: 1.05rem !important;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- chrome: clean white bar ---------- */
.lm-chrome, #lm-chrome-mount .lm-chrome {
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--border-hair) !important;
  box-shadow: none !important;
}
.ts-wordmark, img.lm-wordmark {
  height: 34px !important;
  width: auto !important;
  display: block;
}

/* ---------- buttons: friendly pills ---------- */
.atlas-mp-btn, .atlas-pl-new-btn, button[class*="-btn"]:not(.appearance-seg) {
  border-radius: 999px !important;
  font-family: var(--font-sans);
  font-weight: 700;
}
.atlas-mp-btn-primary, .atlas-pl-new-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  min-height: 52px;
  padding-left: 22px; padding-right: 22px;
  font-size: 1rem !important;
}
.atlas-mp-btn-primary:hover, .atlas-pl-new-btn:hover {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
}

/* ---------- cards + empty states: soft, solid, rounded ---------- */
.lm-card, [class*="-card"] {
  border-color: var(--border-hair);
  border-radius: var(--radius-lg);
}
[class*="empty"] {
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--border-hair) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--card-bg) !important;
}

/* ---------- filter segments: soft chips ---------- */
[class*="filter"] [role="radio"], [class*="filter"] button,
[class*="seg"]:not(.appearance-seg) {
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1rem !important;
}

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], textarea, select {
  border-radius: 12px;
  font-size: 1rem !important;
  font-family: var(--font-sans);
}

/* ---------- focus: visible, emerald ---------- */
:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px;
}

/* ---------- decorative AF art off ---------- */
.atlas-doc-watermark, [class*="orbital"], [class*="orrery"] { display: none !important; }

/* ---------- tabs are tabs, not pills ---------- */
/* The blanket pill rule rounded the admin tab bar's buttons; a tab
   sitting on a rule line keeps its bottom corners square. */
.admin-tabs button, .admin-tab, [role="tab"] {
  border-radius: 10px 10px 0 0 !important;
}