/* ============================================================================
   Komped Design Tokens — served runtime copy.
   SPEC / SOURCE OF TRUTH: .claude/skills/komped-design/colors_and_type.css
   Keep this file in sync with the skill when tokens change.

   Fonts (Geist / Geist Mono / Instrument Serif) are loaded via <link> in
   layouts/base.html, not @import here, to avoid a duplicate font fetch.
   ============================================================================ */

:root {
  /* === Color: warm neutrals (paper) === */
  --paper:        #F7F4EE;   /* default app surface */
  --paper-2:      #EDE7DA;   /* card surface */
  --paper-3:      #E2DBC9;   /* sunken / inset */
  --paper-4:      #D6CDB7;   /* deep inset, table stripe */

  /* === Color: ink === */
  --ink:          #16140F;   /* primary text */
  --ink-2:        #3A362E;   /* secondary text */
  --ink-3:        #6B6557;   /* tertiary / muted text */
  --ink-4:        #9A9384;   /* placeholder / disabled */

  /* === Color: hairlines === */
  --rule:         rgba(22, 20, 15, 0.08);    /* default 1px hairline */
  --rule-strong:  rgba(22, 20, 15, 0.18);    /* emphasis hairline */
  --rule-hover:   rgba(22, 20, 15, 0.35);    /* card-link hover: clearly perceptible darken */

  /* === Color: accent (terracotta) === */
  --accent:       #B7472A;   /* the one accent */
  --accent-ink:   #7A2F1B;   /* pressed, accent text */
  --accent-wash:  #F4E3DA;   /* tint background */
  --accent-line:  rgba(183, 71, 42, 0.24);

  /* === Color: semantic === */
  --positive:     #3F6B4F;   /* approved, attained */
  --positive-wash:#E2EBDF;
  --caution:      #A87622;   /* pending, warning */
  --caution-wash: #F2E7CC;
  --negative:     #8A2A1F;   /* rejected, clawback */
  --negative-wash:#F2DBD5;
  --info:         #3A4F6B;   /* neutral info (rare) */
  --info-wash:    #DDE3EA;

  /* === Color: dark surface (when product needs reverse) === */
  --ink-surface:  #16140F;
  --ink-surface-2:#221F18;
  --ink-surface-3:#2E2A22;
  --paper-on-ink: #F7F4EE;

  /* === Foreground / background semantic aliases === */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-disabled:  var(--ink-4);
  --bg-1:         var(--paper);
  --bg-2:         var(--paper-2);
  --bg-3:         var(--paper-3);

  /* ============ Type ============ */
  --font-sans:  'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

  /* Scale (1.2 base, deliberate display jumps) */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   56px;
  --text-5xl:   76px;
  --text-6xl:   104px;

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.08em;
  --tracking-caps:    0.04em;

  /* ============ Spacing (4px base) ============ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============ Radius ============ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ============ Shadow (used sparingly) ============ */
  --shadow-1: 0 1px 2px rgba(22,20,15,0.04), 0 4px 12px rgba(22,20,15,0.06);
  --shadow-2: 0 8px 24px rgba(22,20,15,0.08), 0 24px 64px rgba(22,20,15,0.12);

  /* ============ Motion ============ */
  --ease-confident: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-panel:  240ms;
  --dur-reveal: 400ms;

  /* ============ Layout ============ */
  --layout-max:    1200px;
  --layout-gutter: 24px;
  --sidebar-w:     260px;
  --rail-w:        360px;
}

/* ============ Semantic typographic styles ============
   Reach for these in components instead of redeclaring. */

.komped-display {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg-1);
}
.komped-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-1);
}
.komped-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  color: var(--fg-1);
}
.komped-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  color: var(--fg-1);
}
.komped-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: 400;
  color: var(--fg-2);
}
.komped-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.komped-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.komped-num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.komped-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--paper-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}

/* Light reset for the design-system surfaces */
.komped-surface {
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ Brand wordmark ============
   Matches ui_kits/app/Sidebar.jsx + ui_kits/site/Nav.jsx exactly:
   lowercase "komped", weight 600, tight tracking, ink color.
   The terracotta dot lives in the logo/favicon symbol, not the text wordmark. */
.brand-wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}

/* Brand logo dot — the terracotta square that "signs" the wordmark.
   Matches favicon.svg / logo-wordmark.svg (a SQUARE, never a circle — README
   accent rule). IDENTITY MOMENTS ONLY: rendered solely where the
   <span class="komped-logo-dot"> child is placed (nav/sidebar logo), never via
   .brand-wordmark itself, so inline "komped" mentions stay dotless.
   Sized in em (≈0.28x cap height) so it scales with each logo's font-size;
   baseline-aligned so its bottom sits on the text baseline. */
.komped-logo-dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.1em;
  background: var(--accent);
  vertical-align: baseline;
}

/* ============ App nav links (sidebar + mobile) ============
   Token-based so a future dark-mode is a token swap, not a markup change. */
.knav {
  color: var(--fg-3);
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-confident),
              color var(--dur-base) var(--ease-confident);
}
.knav:hover { color: var(--fg-1); background: var(--bg-3); }
.knav.is-active { color: var(--accent); background: var(--accent-wash); }
.knav.is-active svg { color: var(--accent); }

/* ============ Marketing nav links + primary button ============ */
.komped-navlink {
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-confident);
}
/* Brand rule: links underline on hover; color does not change. */
.komped-navlink:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Breadcrumb parent-section link (e.g. "Admin" in "Admin / Settings"): elevated to
   --fg-2 — more visible than the --fg-3 separator + current-page text around it — and
   underlines on hover, so it reads as clickable. The rest of the trail stays --fg-3. */
.komped-breadcrumb-link {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-confident);
}
.komped-breadcrumb-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.komped-btn-primary {
  transition: background var(--dur-base) var(--ease-confident),
              transform var(--dur-fast) var(--ease-confident);
}
.komped-btn-primary:hover { background: var(--accent-ink) !important; }
.komped-btn-primary:active { transform: translateY(1px); }  /* one px of mechanical depression */
/* Secondary / ghost: transparent + hairline; hover fills to paper-3 (no border color shift). */
.komped-btn-secondary {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--fg-1);
  transition: background var(--dur-base) var(--ease-confident),
              transform var(--dur-fast) var(--ease-confident);
}
.komped-btn-secondary:hover { background: var(--paper-3); }
.komped-btn-secondary:active { transform: translateY(1px); }

/* ============ Form fields ============
   Matches preview/forms.html: mono uppercase labels, 1px border, accent focus ring. */
.komped-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.komped-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 10px 12px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-1);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  box-sizing: border-box;
}
.komped-input::placeholder { color: var(--fg-disabled); }
.komped-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
/* Selectable card (radio/checkbox wrapper): hairline → accent border + wash when checked. */
.komped-radio-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-confident),
              background var(--dur-base) var(--ease-confident);
}
.komped-radio-card:hover { border-color: var(--rule-strong); }
.komped-radio-card:has(:checked) { border-color: var(--accent); background: var(--accent-wash); }

/* Clickable card (list/index links): hover darkens the hairline — no scale, no shadow.
   Base border lives here (not inline) so the :hover rule can override it — an inline
   `border:` shorthand would set border-color inline and beat this hover. */
.komped-card-link {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-confident);
}
.komped-card-link:hover { border-color: var(--rule-hover); }

/* Table row hover — fills to paper-3 (matches StatementsTable kit). */
.komped-row { transition: background var(--dur-fast) var(--ease-confident); }
.komped-row:hover { background: var(--bg-3); }