/* tokens.css — design system source of truth.
 *
 * Reference these custom properties everywhere; never hardcode a colour,
 * font size, spacing, radius, or motion value.
 *
 * Structure:
 *   - Greyscale ramp + (optional) brand ramp = the raw palette.
 *   - Semantic tokens map ramp values to roles (text, bg, accent, border).
 *   - Components ONLY reference semantic tokens, never the ramp directly.
 *
 * Starter values are intentionally neutral. Tune to match the brand by:
 *   1. Editing the ramp values in the "Palette" section, OR
 *   2. Adding a brand ramp and re-mapping the semantic tokens to it.
 *   3. Tuning typography to match the loaded font (see shared-assets.php
 *      for the Google Fonts URL — change the family there and the
 *      `--rrt-font-*` tokens here together).
 */

:root {
	/* ---------- Palette: greyscale ramp ---------- */
	--rrt-color-white:    #ffffff;
	--rrt-color-grey-50:  #fafafa;
	--rrt-color-grey-100: #f5f5f5;
	--rrt-color-grey-200: #e5e5e5;
	--rrt-color-grey-300: #d4d4d4;
	--rrt-color-grey-400: #a3a3a3;
	--rrt-color-grey-500: #737373;
	--rrt-color-grey-600: #525252;
	--rrt-color-grey-700: #404040;
	--rrt-color-grey-800: #262626;
	--rrt-color-grey-900: #171717;
	--rrt-color-black:    #000000;

	/* ---------- Semantic colour ---------- */
	/* Stone ground, ink text, yellow accent as highlight fill only. */
	--rrt-color-bg:              #F4F2EE;
	--rrt-color-bg-alt:          #FFFFFF;
	--rrt-color-surface:         #FFFFFF;
	--rrt-color-text:            #111111;
	--rrt-color-text-muted:      #6B655E;
	--rrt-color-text-subtle:     #6B655E;
	--rrt-color-text-inverse:    #F4F2EE;
	--rrt-color-accent:          #FFD000;
	--rrt-color-accent-contrast: #5A4A00;
	--rrt-color-border:          #DAD6CF;
	--rrt-color-border-strong:   #111111;
	--rrt-color-link:            var(--rrt-color-text);
	--rrt-color-link-hover:      var(--rrt-color-text-muted);
	--rrt-color-focus-ring:      var(--rrt-color-text);

	/* ---------- Typography ---------- */
	/* Families are loaded by `shared-assets.php` (rrt-fonts handle). */
	--rrt-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rrt-font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rrt-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--rrt-font-weight-regular:  400;
	--rrt-font-weight-medium:   600;
	--rrt-font-weight-semibold: 600;
	--rrt-font-weight-bold:     800;

	/* Type scale — fluid via clamp(). Tune per project. */
	--rrt-fs-display: clamp(2.5rem, 6vw, 4.25rem);
	--rrt-fs-h1:      clamp(2.5rem, 6vw, 4.25rem);
	--rrt-fs-h2:      1.375rem;
	--rrt-fs-h3:      1.125rem;
	--rrt-fs-h4:      1rem;
	--rrt-fs-body:    1.125rem;
	--rrt-fs-body-sm: 1rem;
	--rrt-fs-small:   0.875rem;
	--rrt-fs-eyebrow: 0.8125rem;
	--rrt-fs-card-title: 2rem;

	--rrt-lh-tight:   0.94;
	--rrt-lh-snug:    1.02;
	--rrt-lh-normal:  1.5;
	--rrt-lh-relaxed: 1.5;

	/* Tight tracking for Archivo 800 at display sizes */
	--rrt-tracking-tight:   -0.045em;
	--rrt-tracking-normal:  0;
	--rrt-tracking-eyebrow: 0;

	/* ---------- Spacing scale ---------- */
	/* 4px base. Add or remove steps as the design demands. */
	--rrt-space-2xs: 0.25rem; /*  4px */
	--rrt-space-xs:  0.5rem;  /*  8px */
	--rrt-space-sm:  0.75rem; /* 12px */
	--rrt-space-md:  1rem;    /* 16px */
	--rrt-space-lg:  1.5rem;  /* 24px */
	--rrt-space-xl:  2rem;    /* 32px */
	--rrt-space-2xl: 3rem;    /* 48px */
	--rrt-space-3xl: 4.5rem;  /* 72px */
	--rrt-space-4xl: 6rem;    /* 96px */
	--rrt-space-5xl: 8rem;    /*128px */

	/* ---------- Layout ---------- */
	--rrt-container-max:    72rem;  /* 1152px */
	--rrt-container-narrow: 44rem;  /*  704px */
	--rrt-tape-aside:       24rem;
	--rrt-container-pad-x:  var(--rrt-space-lg);
	--rrt-section-pad-y:    var(--rrt-space-3xl);
	--rrt-grid-gutter:      var(--rrt-space-lg);

	/* ---------- Radius ---------- */
	--rrt-radius-sm:    0.125rem;
	--rrt-radius-md:    0.25rem;
	--rrt-radius-lg:    0.5rem;
	--rrt-radius-pill:  999px;
	--rrt-radius-image: 0;

	/* ---------- Motion ---------- */
	--rrt-duration-fast:   120ms;
	--rrt-duration-normal: 220ms;
	--rrt-duration-slow:   400ms;
	--rrt-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
	--rrt-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

	/* ---------- Elevation ---------- */
	/* Shadows stay subtle by default — prefer borders to shadows for separating surfaces. */
	--rrt-shadow-color: 0 0 0;
	--rrt-shadow-sm: 0 1px 2px rgb(var(--rrt-shadow-color) / 0.06);
	--rrt-shadow-md: 0 4px 12px rgb(var(--rrt-shadow-color) / 0.08);
}