/* ============================================================================
   KITH — Core design tokens (color + type)
   Personal relationship intelligence. Local-first. Sharp, flat, product-grade.

   Derived from the Personal CRM pipeline-monitor's final "flat neutral" theme:
   clean-white shell, hairline borders, one electric-blue accent, Inter with
   tightened tracking, monospace reserved for data/numerics. No gradients,
   no glow at rest — color is spent only on live/active/semantic state.

   Load this file first, then layer component CSS on top.
   ============================================================================ */

/* Inter — body / UI typeface. Loaded from Google Fonts CDN (see README note).
   Swap for a self-hosted copy in fonts/ for production / offline use. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Clash Display — brand DISPLAY typeface (headings, wordmark). Self-hosted.
   Variable file covers weights 200–700; static woff2 fallbacks for the
   signature weights follow so older engines still get the right cut. */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Variable.woff2") format("woff2"),
       url("fonts/ClashDisplay-Variable.woff") format("woff"),
       url("fonts/ClashDisplay-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Medium.woff2") format("woff2"),
       url("fonts/ClashDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Semibold.woff2") format("woff2"),
       url("fonts/ClashDisplay-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Neutral shell (light) ------------------------------------------- */
  --bg:            #ffffff;   /* app background                            */
  --bg-start:      #ffffff;
  --panel:         #ffffff;   /* cards, sheets, surfaces                   */
  --panel-soft:    #f6f6f7;   /* recessed wells, inactive segmented bg     */
  --surface-tint:  #ffffff;   /* raised chip inside a soft well            */

  /* --- Ink (text) ------------------------------------------------------ */
  --ink:           #16161a;   /* primary text, headings                    */
  --ink-2:         #5c616c;   /* secondary text, labels                    */
  --ink-3:         #8a8f98;   /* tertiary text, meta, placeholders         */

  /* --- Hairlines ------------------------------------------------------- */
  --line:          #ececed;   /* default border / divider                  */
  --line-2:        #f3f3f4;   /* faint inner divider (table rows etc.)     */

  /* --- Brand accent (the single pop of color) -------------------------- */
  --accent:        #b8890c;   /* refined gold — the single accent            */
  --accent-strong: #936d08;   /* deeper gold for accent text / pressed       */
  --accent-ink:    #1a1500;   /* near-black text on a gold fill              */
  --brand:         var(--accent);
  --brand-strong:  var(--accent-strong);
  --brand-ink:     var(--accent-ink);

  /* --- Semantic (status) ----------------------------------------------- */
  --ok:            #1fa463;   /* connected / success                       */
  --warn:          #b7791f;   /* needs review / waiting (amber)            */
  --warn-soft:     #f59e0b;   /* lighter amber for fills/dots              */
  --danger:        #c2410c;   /* error / unavailable                       */
  --review:        #8b5cf6;   /* human-review / model-review violet        */

  /* Semantic surface washes */
  --warning-bg:    #fffbeb;
  --warning-ink:   #92400e;
  --error-bg:      #fff7ed;
  --error-border:  #fed7aa;

  /* --- Domain colors (relationship-intelligence vocabulary) ------------ */
  --db-raw:        #0d9488;   /* raw / scratch database (teal)             */
  --db-clean:      #16a34a;   /* clean / canonical database (green)        */

  /* Category palette — people & orgs */
  --cat-startup:     #16a34a;
  --cat-investor:    #2563eb;
  --cat-corporate:   #9333ea;
  --cat-partner:     #0891b2;
  --cat-lp:          #ca8a04;
  --cat-fof:         #ea580c;
  --cat-accelerator: #0d9488;
  --cat-unknown:     #64748b;

  /* Meeting buckets — the "who to meet" triage */
  --meet-must:    #dc2626;    /* Must meet                                 */
  --meet-maybe:   #2563eb;    /* Maybe meet                                */
  --meet-gem:     #0d9488;    /* Hidden gem                                */
  --meet-bench:   #7c3aed;    /* Bench (backlog)                           */

  /* Relationship bands (strength) */
  --band-anchor:     #16a34a;
  --band-strong:     #0d9488;
  --band-developing: #2563eb;
  --band-peripheral: #64748b;

  /* --- Radii ----------------------------------------------------------- */
  --r:        8px;    /* controls: buttons, inputs, chips, badges          */
  --r-card:   12px;   /* surfaces: cards, panels, sheets                   */
  --r-pill:   999px;  /* pills, toggles, status chips                      */

  /* --- Elevation (restrained — flat by default) ------------------------ */
  --shadow-sm: 0 1px 2px rgba(20, 22, 28, .05);
  --shadow:    0 1px 2px rgba(20, 22, 28, .05), 0 6px 18px -10px rgba(20, 22, 28, .14);
  --shadow-lg: 0 1px 2px rgba(20, 22, 28, .05), 0 18px 44px -18px rgba(20, 22, 28, .26);

  /* --- Spacing scale (4px base) ---------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* --- Type families --------------------------------------------------- */
  --font-display: "Clash Display", "Inter", ui-sans-serif, system-ui, sans-serif; /* headings + wordmark */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* --- Type scale (semantic) ------------------------------------------- */
  /* Tightened tracking is core to the brand — headings -0.022em, body -0.011em */
  --h1-size: 26px; --h1-weight: 600; --h1-track: 0; --h1-lh: 1.08; /* Clash Display Semibold */
  --h2-size: 19px; --h2-weight: 600; --h2-track: 0; --h2-lh: 1.18; /* Clash Display Semibold */
  --h3-size: 15px; --h3-weight: 700; --h3-track: -0.014em; --h3-lh: 1.25; /* Inter — UI subhead */
  --p-size:  13px; --p-weight:  400; --p-track: -0.006em;  --p-lh: 1.5;
  --small-size: 12px; --small-weight: 500;
  --label-size: 11px; --label-weight: 800; --label-track: 0.05em; /* UPPERCASE eyebrows */
  --mono-size: 12px;  --mono-weight: 600;
  --data-size: 26px;  --data-weight: 800; --data-track: -0.02em;  /* big metric numerals */

  color-scheme: light;
}

html[data-theme="dark"] {
  /* Near-black shell, brighter accent so it carries on dark. */
  --bg:            #08090a;
  --bg-start:      #0b0c0e;
  --panel:         #0f1011;
  --panel-soft:    #151619;
  --surface-tint:  #1a1c1f;

  --ink:           #f7f8f8;
  --ink-2:         #b3b8c0;
  --ink-3:         #868b94;

  --line:          #232529;
  --line-2:        #1a1c1f;

  --accent:        #e7c24b;   /* luminous gold on near-black                 */
  --accent-strong: #d8b23a;
  --accent-ink:    #1a1500;

  --ok:            #34d17b;
  --warn:          #f4b860;
  --warn-soft:     #f59e0b;
  --danger:        #ff8a62;
  --review:        #b6a2ff;

  --warning-bg:    #2d2110;
  --warning-ink:   #ffd28a;
  --error-bg:      #2a1712;
  --error-border:  #7a3423;

  --db-raw:        #2dd4bf;
  --db-clean:      #34d17b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow:    0 1px 2px rgba(0, 0, 0, .45), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 50px -18px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* ============================================================================
   Semantic element defaults — opt-in via the .kith scope so this file can be
   dropped next to other styles without clobbering them. Add class="kith" to
   <body> (or any wrapper) to inherit the type system.
   ============================================================================ */
.kith {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kith h1, .kith .h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h1-size); font-weight: var(--h1-weight);
  letter-spacing: var(--h1-track); line-height: var(--h1-lh);
}
.kith h2, .kith .h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h2-size); font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track); line-height: var(--h2-lh);
}
.kith h3, .kith .h3 {
  margin: 0;
  font-size: var(--h3-size); font-weight: var(--h3-weight);
  letter-spacing: var(--h3-track); line-height: var(--h3-lh);
}
.kith p, .kith .p {
  margin: 0;
  font-size: var(--p-size); font-weight: var(--p-weight);
  letter-spacing: var(--p-track); line-height: var(--p-lh);
  color: var(--ink-2);
}
.kith .small { font-size: var(--small-size); font-weight: var(--small-weight); color: var(--ink-2); }
.kith .label {
  font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-3);
}
.kith .mono, .kith code, .kith .data {
  font-family: var(--font-mono);
}
.kith .mono { font-size: var(--mono-size); font-weight: var(--mono-weight); }
.kith .data { font-size: var(--data-size); font-weight: var(--data-weight); letter-spacing: var(--data-track); }
.kith a { color: var(--accent); text-decoration: none; }
.kith a:hover { color: var(--accent-strong); }

.kith ::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); }