/* ==========================================================================
   orchis.ai Design System — colors_and_type.css
   Single source of truth for design tokens + base type styles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Ubuntu+Sans:wght@400;500;600&display=swap');

:root {
  /* ----- Color: surfaces & ink ------------------------------------------ */
  --bg:           #f4f1ea;   /* paper — primary background */
  --surface:     #ebe6dc;   /* card / band — one tick darker than paper */
  --surface-2:   #e2dccf;   /* deeper surface, code blocks, table headers */
  --fg:          #1a1815;   /* near-black ink, body + headings */
  --fg-2:        #5a554d;   /* secondary text, captions */
  --fg-3:        #8a8278;   /* tertiary, eyebrow labels */
  --rule:        #d9d3c5;   /* hairlines, borders */
  --rule-strong: #b6ad9b;   /* deeper rule for emphasis dividers */

  /* ----- Color: accent & status ----------------------------------------- */
  --accent:      #b04a2f;   /* clay — single brand accent */
  --accent-ink:  #f4f1ea;   /* ink color for use ON accent backgrounds */
  --accent-soft: #e9c8bc;   /* very pale clay tint, for selection bg only */

  --signal:      #3d6b48;   /* muted forest, "running / OK" status only */
  --warn:        #a37312;   /* amber-bronze, "experimental / alpha" badges */

  /* ----- Type families -------------------------------------------------- */
  --font-display: 'Inter Tight', 'Söhne Breit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ----- Type scale ----------------------------------------------------- */
  --fs-eyebrow:   12px;
  --fs-caption:   13px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h4:        20px;
  --fs-h3:        24px;
  --fs-h2:        36px;
  --fs-h1:        56px;
  --fs-display:   88px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-loose:     1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.08em;   /* +80 thousandths */
  --tracking-caps:    0.06em;

  /* ----- Spacing (8px base) -------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ----- Radii (mostly square) ----------------------------------------- */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;       /* chips/pills only */
  --r-pill: 999px;     /* status dots, pill chips */

  /* ----- Borders & elevation ------------------------------------------- */
  --border:           1px solid var(--rule);
  --border-strong:    1px solid var(--rule-strong);
  --border-ink:       1px solid var(--fg);

  --shadow-pop:       0 12px 32px -16px rgba(26, 24, 21, 0.25);   /* modals/popovers ONLY */

  /* ----- Motion -------------------------------------------------------- */
  --dur-fast:   100ms;
  --dur-base:   160ms;
  --dur-slow:   240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ----- Layout -------------------------------------------------------- */
  --container:   1240px;
  --gutter:      80px;
  --gutter-mob:  24px;
  --measure:     64ch;
}

/* ==========================================================================
   Base elements
   ========================================================================== */

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

/* ----- Headings -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0 0 var(--s-4) 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

/* ----- Body text ------------------------------------------------------- */

p {
  margin: 0 0 var(--s-4) 0;
  color: var(--fg);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: var(--measure);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

/* ----- Eyebrow / overline (mono, all-caps, tracked) ------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
  display: inline-block;
}

/* ----- Links ----------------------------------------------------------- */

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard),
              text-decoration-color var(--dur-base) var(--ease-standard);
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
a.plain {
  text-decoration: none;
}
a.plain:hover {
  color: var(--accent);
}

/* ----- Code & mono ---------------------------------------------------- */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
}

code {
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-1);
  color: var(--fg);
}

pre {
  font-size: 14px;
  line-height: 1.55;
  background: var(--surface-2);
  border: var(--border);
  padding: var(--s-5);
  margin: 0;
  overflow-x: auto;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ----- Buttons (semantic baseline) ------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-1);
  border: var(--border-ink);
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  text-decoration: none;
  letter-spacing: var(--tracking-normal);
}
.btn:hover {
  background: color-mix(in oklch, var(--fg), black 6%);
  color: var(--bg);
}
.btn:active { transform: translateY(0.5px); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--accent:hover {
  background: color-mix(in oklch, var(--accent), black 8%);
  border-color: color-mix(in oklch, var(--accent), black 8%);
  color: var(--accent-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--fg);
  color: var(--fg);
}

.btn--sm { padding: 10px 14px; font-size: 14px; }
.btn--lg { padding: 18px 28px; font-size: var(--fs-body-lg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----- Inputs --------------------------------------------------------- */

.input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 12px 14px;
  background: var(--bg);
  color: var(--fg);
  border: var(--border-strong);
  border-radius: var(--r-1);
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.input:focus {
  outline: none;
  border-color: var(--fg);
}

/* ----- Hairline ------------------------------------------------------- */

hr, .rule {
  border: 0;
  border-top: var(--border);
  margin: var(--s-7) 0;
}

/* ----- Status pip / badge -------------------------------------------- */

.pip {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--fg-3);
  vertical-align: middle;
}
.pip--signal { background: var(--signal); }
.pip--warn   { background: var(--warn); }
.pip--accent { background: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 4px 8px;
  border: var(--border);
  border-radius: var(--r-1);
  color: var(--fg-2);
  background: var(--bg);
}
.badge--signal { color: var(--signal); border-color: color-mix(in oklch, var(--signal), transparent 60%); }
.badge--warn   { color: var(--warn);   border-color: color-mix(in oklch, var(--warn),   transparent 60%); }
.badge--accent { color: var(--accent); border-color: color-mix(in oklch, var(--accent), transparent 60%); }
.badge--ink    { color: var(--bg);     background: var(--fg); border-color: var(--fg); }

/* ----- Container & layout ------------------------------------------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-mob);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--gutter); }
}

.section { padding: var(--s-9) 0; }
@media (max-width: 767px) {
  .section { padding: var(--s-8) 0; }
  h1 { font-size: 40px; }
  .display { font-size: 56px; }
  h2 { font-size: 28px; }
}

/* ----- Tabular nums for tables/data --------------------------------- */
.tnum, table, .num {
  font-variant-numeric: tabular-nums;
}

/* ----- KiCAD MCP logomark: hide unanimated decode-cycle group ------- */
/* The logo SVG ships 16 <text> elements at the same coordinate that are
   meant to be cycled by an external JS driver to look like decoding text.
   Without the driver they all render simultaneously and overlap into mush.
   Hiding the group leaves the static "mixelpixx" wordmark in #Text visible. */
#TextCompute { display: none; }