/* ═══════════════════════════════════════════════════════════════════════════
   Jejo.ai — Visual Identity tokens  ·  LOCKED 2026-07-01
   Colour identity layered on the existing editorial system. Fonts, layout and
   structure are unchanged. Palette source: Jejo.digital guidelines (2015).

   HOW TO USE
     Load this file AFTER theme.css (and after homepage.css on the homepage):
       <link rel="stylesheet" href="css/theme.css">
       <link rel="stylesheet" href="css/homepage.css">   (homepage only)
       <link rel="stylesheet" href="css/tokens.css">      (this file, last)
     Then update the wordmark markup to the mirrored-j form (see bottom).
     See styleguide.md for the full spec.

   THE TWO-PEN SYSTEM
     Coral  = the emphasis pen (marks the one thing: italics, circle, swash, dot)
     Pen blue = the annotation pen (the quiet handwriting: margin notes + thread)
     Midnight = structure (buttons, numbers)   Green = affirmative (checks only)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas: cool neutrals + white cards ── */
  --paper:      #f3f3f1;
  --paper-2:    #ffffff;
  --paper-3:    #eceef0;
  --ink:        #26282e;
  --ink-soft:   #565b63;
  --ink-faint:  rgba(38, 40, 46, 0.12);
  --rule:       rgba(38, 40, 46, 0.16);

  /* ── Accents ── */
  --accent:        #EC6B68;                    /* coral — signature / emphasis */
  --accent-strong: #D9534F;                    /* coral for small text (≤0.9rem) */
  --accent-soft:   rgba(236, 107, 104, 0.12);
  --accent-line:   rgba(236, 107, 104, 0.5);
  --coral:         #EC6B68;
  --navy:          #313447;                    /* structure / buttons */
  --navy-line:     rgba(49, 52, 71, 0.5);
  --green:         #5FB888;                     /* affirmative ticks only */
  --pen:           #2f5180;                     /* hand-drawn annotation ink */

  /* ── Legacy aliases (older page CSS still references these) ── */
  --color-accent:        var(--accent);
  --color-accent-purple: var(--accent);
  --color-accent-pink:   var(--accent);
  --color-bg:      var(--paper);
  --color-surface: var(--paper-2);
}

/* keep the hardcoded note border on-system */
.note { border-left-color: var(--accent-line); }

/* ── Buttons: midnight ground, coral on interaction ── */
.btn, .btn-primary { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.btn:hover, .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-telegram { background: var(--navy); border-color: var(--navy); }
.btn-telegram:hover { background: var(--accent); border-color: var(--accent); }

/* ── Small coral text → stronger coral for legibility ── */
.eyebrow { color: var(--accent-strong); }
.eyebrow::before { background: var(--accent-strong); }

/* ── Structure → midnight ── */
.step-num, .ward-roman { color: var(--navy); }
.value-anchor { color: var(--navy); border-color: var(--navy-line); }
.timeline-step::before { border-color: var(--navy); }
.timeline-day { color: var(--navy); }

/* ── Affirmative ticks → green (and only these) ── */
.pricing-features li::before { background: var(--green); }
.house-item h4::before { background: var(--green); }

/* ── Recommended tier: coral signature edge on a white card ── */
.pricing-card.featured { border-color: var(--accent); }
.pricing-card.plan-selected { box-shadow: inset 0 0 0 1px var(--accent); }

/* ── The annotation pen: thread + margin notes (quiet ink blue) ── */
#threadSvg path { stroke: var(--pen); }
#threadSvg .dot { fill: var(--pen); }
.note { color: var(--pen); border-left-color: var(--pen); }
.nib  { background: var(--pen); }
.note .flourish path, .note .check path { stroke: var(--pen); }

/* ═══ Permanent brand marks ═══ */

/* Mirrored second "j" in the wordmark — the jejo.digital signature.
   Markup:  Je<span class="flip-j">j</span>o<span class="dot">.</span>ai  */
.flip-j { display: inline-block; transform: scaleX(-1); }

/* ③ Ink-circle — lasso the single most important word (coral) */
.circled { position: relative; white-space: nowrap; }
.circled > svg {
  position: absolute; left: -12%; top: -42%;
  width: 124%; height: 184%;
  overflow: visible; pointer-events: none;
}
.circled > svg path { stroke: var(--accent); stroke-width: 1.4; fill: none; stroke-linecap: round; }

/* ④ Pen-swash — underline a key phrase, lifting at the end (coral) */
.ink-swash {
  position: absolute; left: 0; bottom: -13px;
  width: 100%; height: 16px;
  overflow: visible; pointer-events: none;
}
.ink-swash path { stroke: var(--accent); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── Emphasis snippets (apply by hand, sparingly) ──────────────────────────
   Ink-circle:
     <span class="circled">Day&nbsp;3<svg viewBox="0 0 110 46" preserveAspectRatio="none">
       <path d="M12 28 C 4 12, 38 3, 68 5 C 96 7, 108 16, 102 28 C 96 40, 40 44, 18 36"/>
     </svg></span>
   Pen-swash:
     <em style="position:relative;">one conversation.<svg class="ink-swash" viewBox="0 0 300 16" preserveAspectRatio="none">
       <path d="M4 11 C 80 16, 205 16, 286 5 C 294 3.4, 298 6, 295 10"/>
     </svg></em>
   ────────────────────────────────────────────────────────────────────────── */