/* ==========================================================================
   VII Breaths — design tokens
   Sampled from the VII Breaths wordmark: kraft ground, pressed red, black ink.
   Change values here, never in the component files.
   ========================================================================== */

:root {
	/* --- Ground ----------------------------------------------------------- */
	--vii-kraft: #d8c699;        /* the sleeve — sampled from the artwork */
	--vii-kraft-deep: #c0a971;   /* rules and shade on kraft */
	--vii-bone: #ede2c8;         /* lifted panel on kraft */
	--vii-ink: #141210;          /* warm near-black */
	--vii-ink-deep: #0b0a09;     /* deepest ground */

	/* --- Red -------------------------------------------------------------- */
	--vii-red: #be2230;          /* the mark's red — fills, rules, large type */
	--vii-red-hot: #d82a34;      /* live state */
	--vii-red-deep: #9e1b26;     /* small type on kraft — passes AA */
	--vii-red-soft: #e8636a;     /* small type on ink — passes AA */

	/* --- Type on each ground ---------------------------------------------- */
	--vii-on-kraft: #141210;
	--vii-on-kraft-soft: #3d372e;
	--vii-on-ink: #d8c699;
	--vii-on-ink-soft: #a89871;

	/* --- Roles (reassigned per ground by .is-ground-*) --------------------- */
	--vii-bg: var(--vii-kraft);
	--vii-text: var(--vii-on-kraft);
	--vii-text-soft: var(--vii-on-kraft-soft);
	--vii-rule: rgba(20, 18, 16, 0.22);
	--vii-accent: var(--vii-red);
	--vii-accent-text: var(--vii-red-deep);

	/* --- Type ------------------------------------------------------------- */
	/* Big Shoulders Display: condensed like Anton (which it replaced) but with a
	   real weight range, so hierarchy comes from weight as well as size. Only
	   400/600/700/800 are loaded — never ask for a weight that is not, the
	   browser will synthesise it. The Japanese fallbacks carry the proverb,
	   which Big Shoulders has no glyphs for. */
	--vii-font-display: "Big Shoulders Display", "Hiragino Sans", "Noto Sans JP", "Helvetica Neue Condensed", Impact, sans-serif;
	--vii-font-body: "Epilogue", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--vii-weight-display: 700;       /* section and card titles */
	--vii-weight-display-loud: 800;  /* the one or two biggest lines on a page */

	--vii-step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
	--vii-step-0: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
	--vii-step-1: clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
	/* Big Shoulders sets narrower than Anton at the same size — the display
	   steps are up ~8% to hold the same optical weight on the page. */
	--vii-step-2: clamp(1.9rem, 1.6rem + 1.35vw, 2.85rem);
	--vii-step-3: clamp(2.6rem, 2rem + 2.6vw, 4.4rem);
	--vii-step-4: clamp(3.4rem, 2.3rem + 5.2vw, 7rem);

	/* Quotes get their own step. They are set in Epilogue, which runs much
	   wider than the display face at the same size — borrowing step-2 made
	   them shout over the headings they sit between. */
	--vii-step-quote: clamp(1.3rem, 1.05rem + 1.1vw, 2.1rem);

	--vii-leading-tight: 1.06;   /* Big Shoulders has tall caps; 1 stacked them */
	--vii-leading-body: 1.6;
	--vii-tracking-wide: 0.18em;

	/* --- Space ------------------------------------------------------------ */
	--vii-space-3xs: 0.25rem;
	--vii-space-2xs: 0.5rem;
	--vii-space-xs: 0.75rem;
	--vii-space-s: 1rem;
	--vii-space-m: 1.5rem;
	--vii-space-l: 2.5rem;
	--vii-space-xl: 4rem;
	--vii-space-2xl: clamp(4rem, 3rem + 5vw, 7.5rem);

	/* --- Layout ----------------------------------------------------------- */
	--vii-wrap: 70rem;
	--vii-wrap-narrow: 44rem;
	--vii-gutter: clamp(1.25rem, 4vw, 3rem);
	--vii-rail: 15rem;           /* the left rail every section head sits in */

	/* --- Washi ------------------------------------------------------------ */
	/* The bone ground is paper, not board. Two layers: long fibres (turbulence
	   stretched hard along x, which is what makes it read as washi rather than
	   noise) and a slow cloudy tone underneath. Both greyscale, both multiplied,
	   so they darken the ground slightly and never shift its hue. */
	--vii-washi-fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.92' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.45' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)' opacity='0.1'/%3E%3C/svg%3E");
	--vii-washi-tone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)' opacity='0.13'/%3E%3C/svg%3E");

	/* --- The brush -------------------------------------------------------- */
	/* One stroke, used once on a page. Pressed at the head, lifting to a dry
	   tail. A mask, not a coloured SVG, so it takes --vii-accent from whatever
	   ground it lands on. Do not repeat it: a gesture that happens ten times
	   is a pattern, and the wordmark is meant to be the only drawn thing. */
	--vii-stroke-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 48' preserveAspectRatio='none'%3E%3Cpath d='M8,10 C40,6 90,7 150,11 C230,16 320,23 400,29.5 C372,34.5 300,33.5 210,28.5 C140,24.6 70,22 30,23.5 C18,24 11,25 8,26 Z' fill='%23000'/%3E%3Cpath d='M412,31.6 C428,32.6 442,33.4 456,34.2 C444,36.6 428,36.4 412,35.4 Z' fill='%23000'/%3E%3Cpath d='M462,34.6 C468,34.9 472,35.2 475,35.6 C471,36.6 466,36.6 462,36.2 Z' fill='%23000'/%3E%3C/svg%3E");

	/* --- Detail ----------------------------------------------------------- */
	--vii-radius: 0;             /* nothing here is rounded — it is printed */
	--vii-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--vii-duration: 520ms;
	--vii-header-h: 4.5rem;
}

/* --- Grounds -------------------------------------------------------------- */

.is-ground-kraft {
	--vii-bg: var(--vii-kraft);
	--vii-text: var(--vii-on-kraft);
	--vii-text-soft: var(--vii-on-kraft-soft);
	--vii-rule: rgba(20, 18, 16, 0.22);
	--vii-accent: var(--vii-red);
	--vii-accent-text: var(--vii-red-deep);
	background-color: var(--vii-bg);
	color: var(--vii-text);
}

.is-ground-bone {
	--vii-bg: var(--vii-bone);
	--vii-text: var(--vii-on-kraft);
	--vii-text-soft: var(--vii-on-kraft-soft);
	--vii-rule: rgba(20, 18, 16, 0.18);
	--vii-accent: var(--vii-red);
	--vii-accent-text: var(--vii-red-deep);
	background-color: var(--vii-bg);
	color: var(--vii-text);
}

.is-ground-ink {
	--vii-bg: var(--vii-ink);
	--vii-text: var(--vii-on-ink);
	--vii-text-soft: var(--vii-on-ink-soft);
	--vii-rule: rgba(216, 198, 153, 0.24);
	--vii-accent: var(--vii-red-hot);
	--vii-accent-text: var(--vii-red-soft);
	background-color: var(--vii-bg);
	color: var(--vii-text);
}