/* THE DIAL.
 *
 * Ehopto's palette was 196 copies of one grey, 170 of one white and 118 of
 * one blue, typed by hand across seventy-seven files. Tuning the look meant
 * seventy-seven find-and-replaces that drift apart again by the next
 * feature. This is the one place those numbers live.
 *
 * WHAT THIS FILE IS FOR, beyond tidiness: the neutrals were all blue-grey —
 * hue 220, every one of them. A blue-grey ramp is the single loudest
 * corporate signal a dark interface can send; it is what Facebook and
 * LinkedIn sound like, and it was fighting everything else Ehopto does.
 * Warming the ramp — while leaving the navy ground and the blue actions
 * exactly where they are — is the largest change in feel for the smallest
 * change in meaning.
 *
 * The navy stays. The blue stays. Only the greys move.
 */
:root {
    /* ── Ground. The owner's dark navy: never revert. ─────────────── */
    --e-bg: #0b1020;
    --e-card: #121a30;
    --e-sunk: #0e1526;
    --e-line: #223050;
    --e-line-strong: #2a3350;

    /* ── Text. WARM. The one thing that moved. ────────────────────── */
    /* Was #e8ecf6 — a cool white with blue in it. */
    --e-ink: #f0ece9;
    /* Was #8b93a7, hue 220. Same lightness, warm instead of blue. */
    --e-ink-muted: #a39d97;
    /* Was #6c7590. */
    --e-ink-soft: #8a827c;
    /* Was #5d6579 — the quietest label on the page. */
    --e-ink-faint: #746d68;

    /* ── Action. Untouched: the owner likes the blue. ─────────────── */
    --e-accent: #4f8cff;
    --e-accent-soft: #7fb0ff;
    --e-accent-pale: #9fc1ff;
    --e-on-accent: #ffffff;

    /* ── WARM SURFACES. The cream panel. ──────────────────────────────
     *
     * The single most distinctive warm element in the reference is not a
     * typeface or a corner radius — it is a soft butter-yellow panel
     * carrying the thing worth noticing, sitting inside an otherwise cool
     * page. It reads as a hand-written note left on a desk.
     *
     * On Ehopto's navy it does more work than it does on white: one warm
     * surface in a dark room is where the eye goes, so it is spent only on
     * what is genuinely worth the look — an offer, a milestone, the free
     * tier on a page about money. Used on everything it becomes wallpaper
     * and stops meaning anything at all.
     */
    --e-cream: #f7ecd0;
    --e-cream-line: #d9c48d;
    --e-cream-ink: #4a3a12;
    --e-cream-soft: #6b5620;
    /* The same note, dropped onto the dark page rather than a white one. */
    --e-cream-dark: #2a2312;
    --e-cream-dark-line: #6b5416;
    --e-cream-dark-ink: #ffce6b;

    /* ── Meaning. ─────────────────────────────────────────────────── */
    --e-good: #7fe0a8;
    --e-warn: #ffce6b;
    --e-bad: #f87171;

    /* ── Shape. Thicker, rounder, more confident. ─────────────────── */
    /* A 24px icon at 1.7 reads as a spreadsheet. Social iconography
       lives at 2–2.5, with round terminals — which is the single
       biggest warmth lever there is, and costs nothing. */
    --e-stroke: 2.25;
    --e-r-pill: 999px;
    --e-r-card: 16px;
    --e-r-input: 12px;
    --e-r-chip: 12px;

    /* ── Motion. A little overshoot reads as alive; linear reads as
           machinery reporting its own progress. ───────────────────── */
    --e-spring: cubic-bezier(.34, 1.56, .64, 1);
    --e-ease: cubic-bezier(.2, .7, .3, 1);

    /* ── Reach. A thumb is about 44px wide and always has been. ───── */
    --e-tap: 44px;
}

/* Every inline SVG on the site, warmed in one rule.
 *
 * The icons are hand-written into the markup with stroke-width="1.7"
 * repeated twenty-two times. Rather than rewrite each one and hope the
 * next is drawn to match, the weight and the terminals are set here — so
 * an icon pasted in next month is warm whether its author knew or not. */
svg[stroke="currentColor"] {
    stroke-width: var(--e-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Big, obvious, thumb-sized. Buttons that look like buttons. */
.btn,
button.btn,
a.btn {
    border-radius: var(--e-r-pill);
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: transform .18s var(--e-spring), background-color .18s var(--e-ease);
}

.btn:active { transform: scale(.97); }

/* THE NOTE ON THE DESK. Wrap anything worth actually reading.
 *
 * Deliberately one class rather than a set of variants: the moment there
 * are four kinds of callout, every panel on the site becomes one and the
 * warmth stops pointing at anything. */
.e-note {
    background: var(--e-cream-dark);
    border: 1px solid var(--e-cream-dark-line);
    border-radius: var(--e-r-card);
    padding: 14px 16px;
    color: var(--e-cream-dark-ink);
    font-size: 14px;
    line-height: 1.65;
}
.e-note b, .e-note strong { color: #ffe0a3; font-weight: 800; }
.e-note a { color: #ffe0a3; text-decoration: underline; }

/* On a light page — the marketing side — the same note goes back to being
   paper: cream on white, the way the reference draws it. */
.e-note.on-paper {
    background: var(--e-cream);
    border-color: var(--e-cream-line);
    color: var(--e-cream-ink);
}
.e-note.on-paper b, .e-note.on-paper strong { color: #2f2408; }
.e-note.on-paper a { color: #6b5620; }

/* Headings carry the weight; the quiet text stays quiet. A page where
   everything is 600 is a page with no voice. */
h1, h2, h3 { letter-spacing: -0.02em; }
h1 { font-weight: 900; }
h2, h3 { font-weight: 800; }