/* =========================================================
   VMCC / Comeketo — Fusion Tokens
   Light system colors  +  Dark system widget architecture
   ========================================================= */

:root {
  /* ===== Surfaces (from light system) ===== */
  --paper:     #EEECE6;   /* page bg, warm cream */
  --paper-2:   #E7E4DB;   /* deeper paper, footer / dividers / wells */
  --card:      #FBFAF5;   /* floating card surface */
  --card-2:    #F5F2EA;   /* alt card / stripe */
  --well:      #E7E4DB;   /* recessed data plate */
  --well-2:    #DDD9CB;   /* deeper inset */
  --ink:       #16161A;   /* near-black for INK surfaces */
  --ink-2:     #232326;

  /* ===== Hairlines (warm, paper version) ===== */
  --rule:      #D9D5C9;
  --rule-2:    #C7C2B3;
  --hair-1:    rgba(22,22,26,0.06);
  --hair-2:    rgba(22,22,26,0.10);
  --hair-3:    rgba(22,22,26,0.18);

  /* ===== Text ===== */
  --fg:        #16161A;   /* primary */
  --fg-dim:    #4A4740;   /* secondary */
  --fg-mute:   #7A7568;   /* tertiary */
  --fg-faint:  #A39E90;   /* faint / decoration */

  /* ===== Cyan accent (the "alive" signal, from dark system) =====
     Tuned for legibility on warm cream paper. */
  --cy:         #1B9E92;   /* readable on cream — borders, text, fills */
  --cy-bright:  #5DECE1;   /* the heartbeat dot itself */
  --cy-shade:   #0E7F75;   /* deepest, on-paper text */
  --cy-bg:      rgba(27,158,146,0.08);
  --cy-bg-2:    rgba(27,158,146,0.16);
  --cy-edge:    rgba(27,158,146,0.32);
  --cy-halo:    rgba(93,236,225,0.32);

  /* ===== 8 Tones (from light system) ===== */
  --mint-bg:   #DDEDD8;  --mint-ink:   #2E5A2A;  --mint-dot:   #4D7A47;
  --peach-bg:  #F8DEC3;  --peach-ink:  #7A4A1F;  --peach-dot:  #B0712E;
  --lav-bg:    #DCD3EE;  --lav-ink:    #4B3B7A;  --lav-dot:    #6F5BB0;
  --sky-bg:    #C9D6E9;  --sky-ink:    #2A3F66;  --sky-dot:    #3F5A8E;
  --lemon-bg:  #F0E6B5;  --lemon-ink:  #6B5A1A;  --lemon-dot:  #8E7724;
  --rose-bg:   #F4CFCF;  --rose-ink:   #7A2E2E;  --rose-dot:   #A33F3F;
  --sage-bg:   #DCDFC8;  --sage-ink:   #4A4F2A;  --sage-dot:   #6B7240;
  --blush-bg:  #F2D6DA;  --blush-ink:  #813044;  --blush-dot:  #B14861;

  /* ===== Semantic ===== */
  --ok:        #4D7A47;
  --warn:      #8E7724;
  --danger:    #A33F3F;
  --attn:      #B0712E;
  --link:      #3F5A8E;
  --ai:        #6F5BB0;

  /* ===== Module / lifecycle status (the chip vocabulary) ===== */
  --st-ready-bg:    #DDEDD8;  --st-ready-ink:    #2E5A2A;  --st-ready-dot:    #4D7A47;
  --st-pending-bg:  #F0E6B5;  --st-pending-ink:  #6B5A1A;  --st-pending-dot:  #8E7724;
  --st-locked-bg:   #E5E2D6;  --st-locked-ink:   #4A4740;  --st-locked-dot:   #7A7568;
  --st-exp-bg:      #DCD3EE;  --st-exp-ink:     #4B3B7A;  --st-exp-dot:      #6F5BB0;
  --st-needs-bg:    #F8DEC3;  --st-needs-ink:    #7A4A1F;  --st-needs-dot:    #B0712E;
  --st-blocked-bg:  #F4CFCF;  --st-blocked-ink:  #7A2E2E;  --st-blocked-dot:  #A33F3F;
  --st-live-bg:     rgba(27,158,146,0.10);
  --st-live-ink:    #0E7F75;
  --st-live-dot:    #1B9E92;

  /* ===== Type ===== */
  --serif: "Newsreader", "Source Serif 4", "Lora", Georgia, serif;
  --sans:  "Geist", "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* type scale */
  --t-xs:  11px;
  --t-sm:  12.5px;
  --t-md:  14px;
  --t-lg:  16px;
  --t-xl:  20px;
  --t-2xl: 26px;
  --t-3xl: 36px;
  --t-4xl: 52px;
  --t-5xl: 72px;

  /* leading / tracking */
  --tight:  -0.025em;
  --normal: -0.005em;
  --wide:   0.12em;
  --ultra:  0.18em;

  /* spacing */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 80px;

  /* radii */
  --r-1: 4px;   --r-2: 8px;   --r-3: 12px;  --r-4: 16px;
  --r-card: 12px;
  --r-pill: 999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(20,20,15,0.04), 0 0 0 1px rgba(20,20,15,0.04);
  --shadow-md: 0 2px 8px rgba(20,20,15,0.06), 0 0 0 1px rgba(20,20,15,0.05);
  --shadow-lg: 0 8px 32px rgba(20,20,15,0.08), 0 0 0 1px rgba(20,20,15,0.05);
}

/* ===== Base ===== */
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.5;
  letter-spacing: var(--normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","ss02","cv11";
}
* { box-sizing: border-box; }

/* ===== Type helpers ===== */
.t-eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ultra);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.t-eyebrow b { color: var(--fg); font-weight: 500; }
.t-num {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.t-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-4xl);
  letter-spacing: var(--tight);
  line-height: 1.02;
  color: var(--fg);
}
.t-display .em { font-style: italic; color: var(--cy-shade); }
.t-title-1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-3xl);
  letter-spacing: var(--tight);
  line-height: 1.08;
}
.t-title-2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.t-title-3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.t-body    { font-size: var(--t-md);  color: var(--fg-dim); line-height: 1.55; }
.t-body-sm { font-size: var(--t-sm);  color: var(--fg-dim); line-height: 1.55; }
.t-caption { font-size: var(--t-xs);  color: var(--fg-mute); }
.t-mono    { font-family: var(--mono); font-size: var(--t-sm); color: var(--fg-mute); letter-spacing: 0.02em; }
.t-mono-xs { font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.04em; }
.t-stat {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-3xl);
  letter-spacing: var(--tight);
  line-height: 1;
  color: var(--fg);
}
.t-stat-sm {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-xl);
  letter-spacing: var(--tight);
  line-height: 1;
  color: var(--fg);
}
.t-stat .em { color: var(--cy-shade); font-style: italic; }

/* utility */
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--fg-mute); }
.faint { color: var(--fg-faint); }

/* hide scrollbars on the page shell but keep functional */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; border: 2px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--rule-2); }