/* JDP Relations — token layer.
   Ported verbatim from the design system's tokens/*.css. Do not edit values here to
   restyle a component; components read these variables, never literals.
   Source of truth: .claude/skills/jdp-relations-design/tokens/ */

/* ── tokens/colors.css ───────────────────────────────────────────── */
:root{
/* — Grounds — flat fields, never gradients */
--paper:#FBFAF7;            /* page background */
--white:#FFFFFF;            /* bands, windows, cards */
--panel:#F5F3EE;            /* hero + closing panels */
--card:#FDFCFA;             /* tiles, header rows */
--paper-2:#EDEAE3;          /* soft button, backdrop panels */
--band:#F2F0EA;             /* bolder band ground */
--wash-orange:#FCF0E6;      /* accent band ground */
--wash-blue:#EDF1F7;        /* blue column, data bands */
--dark:#141312;             /* the one dark container */
--dark-2:#1E1C1A;           /* cards inside the dark container */

/* — Ink & text — */
--ink:#1B1A19;              /* headlines, dark buttons */
--lede:#55524C;             /* ledes and subs */
--body:#5D5A54;             /* 15px body copy */
--label:#6B6862;            /* mono labels, captions — 4.6:1 on --card, the lightest ground it sits on */
--ghost:#9B968D;            /* the grey half of a lockup */
--on-dark:#FFFFFF;
--on-dark-soft:rgba(255,255,255,.62);
--on-dark-label:rgba(255,255,255,.44);

/* — Hairlines — every border in the system — */
--hairline:rgba(27,26,25,.11);
--hairline-strong:rgba(27,26,25,.18);
--hairline-dark:rgba(255,255,255,.10);
--header-scrim:rgba(251,250,247,.86);  /* sticky header backdrop */

/* — Accent — JDP Orange. One per element. — */
/* Added: Button.jsx hardcodes the soft hover as #E3DFD6. Tokenised here so the
   ink ground can override it; the paper value is the design system's own. */
--paper-2-press:#E3DFD6;

--orange:#E86008;
--orange-press:#C94F02;
--orange-soft:#F7A86A;      /* on dark grounds only */
--orange-tint:rgba(232,96,8,.12);

/* — Structural secondary — JDP Blue. Data, product chrome, quiet marks. — */
--blue:#4868A0;
--blue-deep:#33507F;
--blue-soft:#8EA5C9;        /* bars, sparklines, on dark */
--blue-tint:rgba(72,104,160,.12);

/* — Status, inside data only — */
--booked:#2F6D4F;           /* answered / booked */
--booked-tint:rgba(47,109,79,.12);
--missed:#C0533A;           /* missed call, voicemail */
--missed-tint:rgba(192,83,58,.14);

/* — Focus — */
--focus:rgba(232,96,8,.34);

/* Semantic aliases — prefer these in components */
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-tile:var(--card);
--surface-sunken:var(--panel);
--surface-inverse:var(--dark);
--text-heading:var(--ink);
--text-lede:var(--lede);
--text-body:var(--body);
--text-label:var(--label);
--text-accent:var(--orange);
--border-default:var(--hairline);
}

/* ── tokens/typography.css ───────────────────────────────────────────── */
:root{
/* Families — three roles, no fourth */
--font-display:"Newsreader",ui-serif,Georgia,serif;   /* headlines + every figure */
--font-sans:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

/* Weights — display never exceeds 500 */
--fw-display:400; /* @kind font */
--fw-display-med:500; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */

/* Sizes */
--fs-hero:clamp(38px,5.2vw,62px); /* @kind font */
--fs-h2:clamp(32px,3.6vw,50px); /* @kind font */
--fs-h3:28px; /* @kind font */
--fs-card-title:19.5px; /* @kind font */
--fs-figure-xl:76px; /* @kind font */
--fs-figure:44px; /* @kind font */
--fs-serif-lede:23px; /* @kind font */
--fs-lede:17.5px; /* @kind font */
--fs-body:15px; /* @kind font */
--fs-sm:13.5px; /* @kind font */
--fs-xs:12px; /* @kind font */
--fs-mono:10.5px; /* @kind font */
--fs-mono-lg:11.5px; /* @kind font */

/* Line heights */
--lh-hero:1.07; /* @kind font */
--lh-h2:1.1; /* @kind font */
--lh-title:1.3; /* @kind font */
--lh-lede:1.55; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-tight:1; /* @kind font */

/* Tracking */
--ls-hero:-0.012em; /* @kind font */
--ls-h2:-0.012em; /* @kind font */
--ls-figure:-0.022em; /* @kind font */
--ls-mono:0.1em; /* @kind font */
--ls-logotype:0.2em; /* @kind font */

/* Measure */
--measure-body:470px; /* @kind spacing */
--measure-lede:560px; /* @kind spacing */
--measure-headline:15ch; /* @kind spacing */
}

/* ── tokens/spacing.css ───────────────────────────────────────────── */
:root{
/* 4px base, but never snapped — odd values are intentional where they appear */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;
--space-8:40px;
--space-9:56px;
--space-10:72px;
--space-11:96px;
--space-12:128px;

--section-y:clamp(72px,9vw,124px); /* @kind spacing */
--band-y:clamp(56px,6vw,88px); /* @kind spacing */
--gutter:clamp(20px,4vw,40px); /* @kind spacing */
--container:1120px; /* @kind spacing */
--container-narrow:760px; /* @kind spacing */
--grid-gap:20px;
}

/* ── tokens/borders.css ───────────────────────────────────────────── */
:root{
--border-w:1px; /* @kind other */
--border:var(--border-w) solid var(--hairline); /* @kind other */
--border-dark:var(--border-w) solid var(--hairline-dark); /* @kind other */

/* Radii — small and consistent. Nothing is a capsule except pills. */
--radius-xs:4px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--radius-window:12px;
--radius-pill:999px;
}

/* ── tokens/elevation.css ───────────────────────────────────────────── */
:root{
/* Shadow is rare. Hairlines do the separating. */
--shadow-none:none;
--shadow-window:0 1px 2px rgba(27,26,25,.04),0 18px 44px -28px rgba(27,26,25,.22);
--shadow-pop:0 1px 2px rgba(27,26,25,.05),0 10px 24px -14px rgba(27,26,25,.18);
--shadow-inset-hairline:inset 0 0 0 1px var(--hairline);
--ring-focus:0 0 0 3px var(--focus);
}

/* ── tokens/motion.css ───────────────────────────────────────────── */
:root{
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--dur-instant:90ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-fade-section:500ms; /* @kind other */
--dur-type-char:22ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-fade-section:0ms; /* @kind other */
--dur-type-char:0ms /* @kind other */}}

/* ── tokens/base.css — element resets + helpers ──────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-display-med);color:var(--ink);margin:0;letter-spacing:var(--ls-h2);text-wrap:balance}
h1{font-size:var(--fs-hero);font-weight:var(--fw-display);line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-title)}
p{margin:0}
a{color:var(--orange);text-decoration:none;border-bottom:1px solid var(--orange-tint);transition:border-color var(--dur-fast) var(--ease-out)}
a:hover{border-bottom-color:var(--orange)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--ring-focus)}
::selection{background:var(--orange-tint);color:var(--ink)}
.jdp-kicker{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--label)}
.jdp-figure{font-family:var(--font-display);font-weight:var(--fw-display-med);letter-spacing:var(--ls-figure);color:var(--ink)}
.jdp-container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ── The Ink ground — the alternate surface ───────────────────────
   Ported verbatim from JDP_INK_CSS in the design system's
   ui_kits/marketing-site/tweaks-config.jsx, scoped to an attribute instead of
   :root so the page can be flipped without a rebuild. Every component reads
   tokens, so this one layer inverts the whole page and nothing is styled
   per-ground. Set <html data-ground="ink"> to use it.
   OPEN DECISION: readme.md records Ink as the chosen ground; the shipped
   template and Jacob's supplied render are both Paper. Paper is the default
   here until Jacob confirms. See task.md. */
:root[data-ground="ink"]{
--paper:#141312;--white:#1E1C1A;--panel:#1A1917;--card:#1E1C1A;--paper-2:#292520;--band:#191816;
--paper-2-press:#332E28;
--wash-blue:#1B2029;--wash-orange:#26190F;--dark:#0D0C0B;--dark-2:#1A1917;
--ink:#FFFFFF;--lede:rgba(255,255,255,.74);--body:rgba(255,255,255,.68);
--label:rgba(255,255,255,.60);--ghost:rgba(255,255,255,.44);
--hairline:rgba(255,255,255,.12);--hairline-strong:rgba(255,255,255,.22);
--header-scrim:rgba(20,19,18,.86);
--orange:#F2751C;--orange-press:#E86008;--orange-soft:#F7A86A;--orange-tint:rgba(242,117,28,.18);
--blue:#8EA5C9;--blue-deep:#B6C6E0;--blue-tint:rgba(142,165,201,.15);
--booked:#6FB894;--booked-tint:rgba(111,184,148,.16);--missed:#E08163;--missed-tint:rgba(224,129,99,.18);
--shadow-window:0 1px 2px rgba(0,0,0,.5),0 22px 50px -28px rgba(0,0,0,.8);
--focus:rgba(242,117,28,.42);
}