/* ClisTa Protocol — foundation stylesheet
   ---------------------------------------------------------------
   Tokens + base layer, recreated from the ClisTa Protocol Design
   System (claude.ai/design handoff). Monochrome by conviction;
   color appears only as a protocol signal.

   Brand sources:
   - github.com/lati-club/clista-protocol   (protocol README, voice)
   - clista-protocol-launch-planning/        (logos, one-pager, copy)

   FONT SUBSTITUTION: the wordmark uses a custom thin geometric face.
   Jost (Futura-genre) is the closest free match, loaded from Google. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Families --------------------------------------------- */
  --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---------------------------------------------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Type scale ------------------------------------------- */
  --fs-display-xl: 72px;
  --fs-display-lg: 54px;
  --fs-display-md: 40px;
  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-body-lg: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-mono: 14px;
  --fs-mono-sm: 13px;

  /* ---- Line heights ----------------------------------------- */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-heading: 1.24;
  --lh-body: 1.6;
  --lh-mono: 1.55;

  /* ---- Letter spacing --------------------------------------- */
  --ls-eyebrow: 0.18em;
  --ls-display: 0.04em;
  --ls-tight: -0.01em;
  --ls-normal: 0;

  /* ---- Ink ramp (the spine) --------------------------------- */
  --black:    #000000;
  --ink-950:  #0D0D0F;   /* primary ink: text, solid surfaces */
  --ink-900:  #141417;
  --ink-800:  #1E1E22;
  --ink-700:  #2B2B31;
  --ink-600:  #45454D;
  --ink-500:  #6B6B73;   /* muted text */
  --ink-400:  #8E8E97;   /* placeholder, disabled */
  --ink-300:  #B4B4BC;
  --ink-200:  #D7D7DD;   /* hairline borders on paper */
  --ink-150:  #E4E4E9;
  --ink-100:  #EEEEF1;   /* subtle fills */
  --ink-50:   #F6F6F8;   /* page tint */
  --paper:    #FFFFFF;

  /* ---- Signal (muted, fail-closed semantics) ---------------- */
  --verified:      #1F7A4D;
  --verified-tint: #E9F3ED;
  --evidence:      #2A5BB8;
  --evidence-tint: #E9EFF8;
  --degraded:      #9A6B12;
  --degraded-tint: #F6EFE0;
  --failed:        #B23A33;
  --failed-tint:   #F7E9E8;

  /* ---- Semantic aliases ------------------------------------- */
  --bg-page:        var(--ink-50);
  --bg-surface:     var(--paper);
  --bg-sunken:      var(--ink-100);
  --bg-inverse:     var(--ink-950);
  --bg-fill:        var(--ink-100);

  --text-strong:    var(--ink-950);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-inverse:   var(--paper);
  --text-link:      var(--ink-950);

  --border-hair:    var(--ink-200);
  --border-strong:  var(--ink-950);
  --border-faint:   var(--ink-150);
  --border-inverse: #34343B;

  /* ---- Terminal palette (dark protocol surface) ------------- */
  --term-bg:    #0D0D0F;
  --term-fg:    #E6E6EA;
  --term-dim:   #6B6B73;
  --term-green: #4BB07A;
  --term-blue:  #5B8FE6;
  --term-amber: #D2A24C;
  --term-red:   #E0635B;

  /* ---- 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;

  /* ---- Radii (architectural, tight) ------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---- Border widths ---------------------------------------- */
  --bw-hair: 1px;
  --bw-medium: 1.5px;
  --bw-strong: 2px;

  /* ---- Elevation (sparse; hairline-first) ------------------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(13, 13, 15, 0.06);
  --shadow-md:   0 4px 16px rgba(13, 13, 15, 0.08);
  --shadow-lg:   0 18px 48px rgba(13, 13, 15, 0.16);
  --shadow-term: 0 24px 64px rgba(0, 0, 0, 0.32);

  /* ---- Motion (disciplined, no bounce) ---------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ----------------------------------------------- */
  --container:    1200px;
  --container-rd: 880px;
  --gutter:       24px;
}

/* ---- Base layer --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }

code, pre, kbd, samp { font-family: var(--font-mono); }

::selection { background: var(--ink-950); color: var(--paper); }

/* ---- Brand utilities ---------------------------------------- */

/* Letterspaced uppercase label — "CORE LAW", "THE LIVED PROOF" */
.cl-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cl-eyebrow--inverse { color: var(--ink-300); }

/* Geometric display, echoes the wordmark */
.cl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}

/* The signature divider: a hairline rule broken by a center dot */
.cl-rule-dot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  color: var(--border-hair);
}
.cl-rule-dot::before,
.cl-rule-dot::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.cl-rule-dot > span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-950);
  flex: none;
}

/* Monospace meta — IDs, hashes, tags */
.cl-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-muted);
}