/* Edmond OS — shared design kit. One definition of Apple + Claude, loaded by every app
   AFTER its own <style> so it's authoritative. Matches the canonical looks:
   APPLE  = bodyOS  (bold sans headings, solid ink, blue accent, cool neutral)
   CLAUDE = taskOS  (Newsreader serif headings, coral accent + coral serif numbers, warm paper)
   Heading FONT already follows the --serif token per kit; this file fixes the bits that drifted:
   the hero gradient, the accent colors, and the big-number colors. */

/* ---------- HERO / display titles ---------- */
/* Apple (default): solid ink, bold, NO gradient. */
.home-title, .os-title, .dash-title, .hero h1 {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-weight: 700;
}
/* Claude: ink heading, medium weight, with only the italic accent word in coral. */
html.kit-claude .home-title, html.kit-claude .os-title,
html.kit-claude .dash-title, html.kit-claude .hero h1 {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-weight: 500;
}
html.kit-claude .home-title em, html.kit-claude .os-title em,
html.kit-claude .hero h1 em {
  font-style: italic;
  color: var(--sky) !important;
  -webkit-text-fill-color: var(--sky) !important;
}
/* bodyOS hero "Today" (.thero-title): serif + coral under Claude (stays bold sans ink in Apple). */
html.kit-claude .thero-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--sky) !important;
  -webkit-text-fill-color: var(--sky) !important;
}
/* bodyOS pillar Roman numerals (I/II/III): coral under Claude (overrides the monochrome ink rule). */
html.kit-claude .pillar .pillar-n { color: var(--sky) !important; }

/* bodyOS accordion icon: open-state tint was Apple blue; make it coral under Claude. */
html.kit-claude details.sec[open] .sec-ic {
  background: rgba(217,119,87,0.12) !important;
  border-color: rgba(217,119,87,0.32) !important;
  color: var(--sky) !important;
}
html.kit-claude.dark details.sec[open] .sec-ic {
  background: rgba(224,133,92,0.16) !important;
  border-color: rgba(224,133,92,0.34) !important;
}

/* ---------- Big stat numbers: ink in Apple, coral in Claude ---------- */
.home-stat .v, .prio-num,
.fact .n, .tile .v, .dcard-big b, .mcard-big b, .ringtext b, .wbar-top b, .cost-subln b, .cost-head .v {
  color: var(--ink);
}
html.kit-claude .home-stat .v, html.kit-claude .prio-num,
html.kit-claude .fact .n, html.kit-claude .tile .v, html.kit-claude .dcard-big b,
html.kit-claude .mcard-big b, html.kit-claude .ringtext b, html.kit-claude .wbar-top b,
html.kit-claude .cost-subln b, html.kit-claude .cost-head .v {
  color: var(--sky);
}

/* ---------- Universal header (bodyOS canonical) — same on every surface ---------- */
/* Container: solid paper, no blur, 1px line, 11/28 padding. Overrides per-app blur/height. */
.nav { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--line) !important; }
.nav-inner, .nav .wrap { padding: 11px 28px !important; }
.nav .wrap { height: auto !important; }
/* Logo: heading font (via --serif token) app name + accent "by Edmond" descriptor. */
.nav-logo { font-family: var(--serif) !important; font-weight: 600; font-size: 18px; letter-spacing: .01em; color: var(--ink); }
.nav-logo b { font-weight: 600; }
.nav-logo span { color: var(--sky); font-weight: 500; font-size: 18px; margin-left: 0; }

/* ---------- Design-kit switch control (identical in every app) ---------- */
.kit-sw{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:2px;background:var(--wash)}
.kit-sw button{border:none;background:none;cursor:pointer;font:inherit;font-size:11px;font-weight:600;color:var(--muted);padding:4px 11px;border-radius:100px;transition:color .15s,background .15s}
.kit-sw button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}
html.dark .kit-sw button.on{box-shadow:none}

/* ---------- Shared semantic status tokens (both kits, both modes) ---------- */
:root{--good:#1c7a3e;--good-bg:#e3f7eb;--warn:#b15c00;--warn-bg:#fff3e3;--info:var(--sky);--info-bg:var(--wash);--danger:#d70015;--danger-bg:#ffece9}
html.dark{--good:#5fd47e;--good-bg:rgba(52,199,89,.18);--warn:#ffb04d;--warn-bg:rgba(255,149,0,.16);--danger:#ff6961;--danger-bg:rgba(215,0,21,.18)}
html.kit-claude{--good:#788c5d;--good-bg:rgba(120,140,93,.14);--warn:#b15c00;--warn-bg:rgba(177,92,0,.12);--danger:#b0322a;--danger-bg:rgba(176,50,42,.12)}
html.kit-claude.dark{--good:#6fce93;--good-bg:rgba(111,206,147,.16);--warn:#d9a35a;--warn-bg:rgba(217,163,90,.16);--danger:#e08077;--danger-bg:rgba(224,128,119,.16)}

/* ---------- Shared focus-visible ring (every interactive control) ---------- */
a:focus-visible, button:focus-visible, .mod:focus-visible, .kit-sw button:focus-visible,
.theme-sw:focus-visible, .hab:focus-visible, .tab:focus-visible, .modcard:focus-visible,
.prio:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 2px;
}