/*
 * Design tokens.
 *
 * Every value maps to a theme.json preset first and only falls back to a
 * literal if the theme isn't active. That's what makes the site editable
 * without a developer: change Brand in Appearance → Editor → Styles and every
 * block that uses --rim-brand follows, because the preset variable is the
 * single source of truth. Nothing here hardcodes a colour the editor can't reach.
 */

:root {
  --rim-brand: var(--wp--preset--color--brand, #333333);
  --rim-brand-dark: var(--wp--preset--color--brand-dark, #1f1f1f);
  --rim-accent: var(--wp--preset--color--accent, #eeba00);
  /* The brand orange is a FILL colour — at 2.4:1 on white it fails WCAG AA for
     text. This darker variant is used wherever accent-coloured type sits on a
     light surface; the fill colour is unchanged. */
  --rim-accent-text: var(--wp--preset--color--accent-text, #7a6000);
  --rim-accent-dark: var(--wp--preset--color--accent-dark, #c99e00);
  --rim-ink: var(--wp--preset--color--ink, #333333);
  --rim-ink-soft: var(--wp--preset--color--ink-soft, #57534a);
  --rim-muted: var(--wp--preset--color--muted, #7d7870);
  --rim-line: var(--wp--preset--color--line, #e6e2d8);
  /* Form-control boundaries need 3:1 against their surface — regular line is
     decorative-only contrast. */
  --rim-line-strong: #767676;
  --rim-surface: var(--wp--preset--color--surface, #ffffff);
  --rim-surface-alt: var(--wp--preset--color--surface-alt, #f6f5f1);
  --rim-surface-deep: var(--wp--preset--color--surface-deep, #202226);
  /* Woven texture laid over every deep surface — kept as a token so the
     weave changes in one place or can be retired without touching blocks. */
  --rim-weave:
    radial-gradient(120% 90% at 12% 0%, rgb(255 255 255 / 2.5%), transparent 55%),
    radial-gradient(110% 95% at 88% 100%, rgb(0 0 0 / 30%), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M24 0v96M48 0v96M72 0v96M0 24h96M0 48h96M0 72h96' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3Cpath d='M0 .5h96M.5 0v96' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  --rim-on-brand: var(--wp--preset--color--surface, #ffffff);
  /* Text sitting ON the accent fill. White on this orange is 2.4:1 and fails
     AA; the ink colour is 6.7:1. Kept as its own token so a future darker
     brand colour can flip it back to white in one place. */
  --rim-on-accent: var(--wp--preset--color--ink, #333333);
  --rim-focus: var(--wp--preset--color--accent-text, #7a6000);
  /* Site-level brand accent for the quiz funnel plugin (its per-form setting
     still wins when set). */
  --mcz-qf-accent-site: var(--rim-accent);

  --rim-font-heading: var(--wp--preset--font-family--heading, ui-sans-serif, system-ui, sans-serif);
  --rim-font-body: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);

  --rim-step--1: var(--wp--preset--font-size--x-small, clamp(0.83rem, 0.8rem + 0.14vw, 0.92rem));
  --rim-step-0: var(--wp--preset--font-size--small, clamp(1rem, 0.96rem + 0.19vw, 1.13rem));
  --rim-step-1: var(--wp--preset--font-size--medium, clamp(1.2rem, 1.12rem + 0.36vw, 1.44rem));
  --rim-step-2: var(--wp--preset--font-size--large, clamp(1.44rem, 1.3rem + 0.63vw, 1.86rem));
  --rim-step-3: var(--wp--preset--font-size--x-large, clamp(1.73rem, 1.5rem + 1.02vw, 2.41rem));
  --rim-step-4: var(--wp--preset--font-size--xx-large, clamp(2.07rem, 1.72rem + 1.57vw, 3.13rem));
  --rim-step-5: var(--wp--preset--font-size--display, clamp(2.49rem, 1.95rem + 2.36vw, 4.06rem));

  --rim-space-2xs: var(--wp--preset--spacing--20, clamp(0.5rem, 0.48rem + 0.14vw, 0.63rem));
  --rim-space-sm: var(--wp--preset--spacing--30, clamp(0.75rem, 0.71rem + 0.21vw, 0.94rem));
  --rim-space-md: var(--wp--preset--spacing--40, clamp(1rem, 0.95rem + 0.28vw, 1.25rem));
  --rim-space-lg: var(--wp--preset--spacing--50, clamp(1.5rem, 1.43rem + 0.42vw, 1.88rem));
  --rim-space-xl: var(--wp--preset--spacing--60, clamp(2rem, 1.81rem + 0.85vw, 2.75rem));
  --rim-space-2xl: var(--wp--preset--spacing--70, clamp(3rem, 2.62rem + 1.7vw, 4.5rem));
  --rim-space-3xl: var(--wp--preset--spacing--80, clamp(4rem, 3.24rem + 3.4vw, 7rem));

  --rim-radius: 0px;
  --rim-radius-lg: 2px;
  --rim-shadow: var(--wp--preset--shadow--soft, 4px 4px 0 rgb(51 51 51 / 10%));
  --rim-shadow-lg: var(--wp--preset--shadow--lifted, 8px 8px 0 rgb(51 51 51 / 14%));

  --rim-measure: 68ch;
  --rim-container: var(--wp--style--global--wide-size, 1200px);
  --rim-container-wide: 1440px;

  --rim-ease: cubic-bezier(0.2, 0, 0, 1);
  --rim-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rim-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --rim-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --rim-duration: 240ms;
}

/*
 * Deep tone: any block can opt into the dark woven surface. Everything inside
 * re-reads the SAME tokens, remapped for the dark ground — text, rules, cards
 * and links all adjust with zero per-block overrides. The accent fill passes
 * AA as text on the deep surface (7.2:1), so accent-text maps straight to it.
 */
.rim-tone--deep {
  background-color: var(--rim-surface-deep);
  background-image: var(--rim-weave);
  color: var(--rim-ink);
  --rim-ink: var(--wp--preset--color--surface, #ffffff);
  --rim-ink-soft: rgb(255 255 255 / 72%);
  --rim-muted: rgb(255 255 255 / 55%);
  --rim-line: rgb(255 255 255 / 16%);
  --rim-line-strong: rgb(255 255 255 / 42%);
  --rim-surface: #272525;
  --rim-surface-alt: #232121;
  --rim-brand: var(--wp--preset--color--surface, #ffffff);
  --rim-on-brand: var(--rim-surface-deep);
  --rim-accent-text: var(--rim-accent);
  --rim-focus: var(--rim-accent);
  --rim-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 26%);
  --rim-shadow-lg: 0 2px 6px rgb(0 0 0 / 34%), 0 18px 44px rgb(0 0 0 / 42%);
}

.rim-section {
  padding-block: var(--rim-space-3xl);
  container-type: inline-size;
}

.rim-container {
  width: min(100% - (var(--rim-space-lg) * 2), var(--rim-container));
  margin-inline: auto;
}

.rim-container--wide {
  width: min(100% - (var(--rim-space-lg) * 2), var(--rim-container-wide));
}

.rim-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--rim-space-md);
  margin: 0 0 var(--rim-space-sm);
  color: var(--rim-accent-text);
  font-family: var(--rim-font-heading);
  font-size: var(--rim-step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The hero's rule treatment, everywhere an eyebrow appears. */
.rim-eyebrow::after {
  content: '';
  flex: 0 1 min(14ch, 20%);
  block-size: 6px;
  background: repeating-linear-gradient(-45deg, var(--rim-accent) 0 6px, transparent 6px 12px);
}

.rim-title {
  margin: 0;
  color: var(--rim-ink);
  font-family: var(--rim-font-heading);
  font-size: var(--rim-step-4);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.rim-title--sm {
  font-size: var(--rim-step-3);
}

/* Keeps the visual size when an editor drops the tag to p/span for SEO reasons. */
.rim-as-heading {
  display: block;
}

.rim-lede {
  max-inline-size: var(--rim-measure);
  margin: var(--rim-space-md) 0 0;
  color: var(--rim-ink-soft);
  font-size: var(--rim-step-1);
  line-height: 1.6;
  text-wrap: pretty;
}

.rim-prose {
  max-inline-size: var(--rim-measure);
  color: var(--rim-ink-soft);
  font-size: var(--rim-step-0);
  line-height: 1.7;
}

.rim-prose > * + * {
  margin-block-start: var(--rim-space-md);
}

:is(.rim-prose, .rim-lede) a {
  color: var(--rim-accent-text);
  text-decoration-color: var(--rim-accent);
  text-underline-offset: 0.15em;
}

:is(.rim-prose, .rim-lede) a:hover {
  color: var(--rim-ink);
}

.rim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rim-space-2xs);
  min-block-size: 48px;
  padding: var(--rim-space-sm) var(--rim-space-lg);
  border: 2px solid transparent;
  border-radius: var(--rim-radius);
  font-family: var(--rim-font-heading);
  font-size: var(--rim-step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* Stamped: hard offset shadow that the button presses into on hover. */
.rim-btn--primary {
  border: 2px solid var(--rim-ink);
  background: var(--rim-accent);
  color: var(--rim-on-accent);
  box-shadow: 4px 4px 0 var(--rim-ink);
}

.rim-btn--primary:hover {
  background: var(--rim-accent);
  box-shadow: 2px 2px 0 var(--rim-ink);
  transform: translate3d(2px, 2px, 0);
}

.rim-btn--primary:active {
  box-shadow: 0 0 0 var(--rim-ink);
  transform: translate3d(4px, 4px, 0);
}

.rim-btn--secondary {
  border-color: currentcolor;
  background: transparent;
  color: var(--rim-ink);
}

.rim-btn--secondary:hover {
  background: var(--rim-ink);
  color: var(--rim-on-brand);
}

.rim-btn--on-dark.rim-btn--secondary {
  color: var(--rim-on-brand);
}

.rim-btn--on-dark.rim-btn--secondary:hover {
  background: var(--rim-on-brand);
  color: var(--rim-ink);
}

/* Focus rings are for keyboards — a pointer click never draws a box, and
   every interactive element inside the blocks gets the same accent ring. */
[class^='rim-']:focus:not(:focus-visible),
[class*=' rim-']:focus:not(:focus-visible) {
  outline: none;
}

[class^='rim-']:focus-visible,
[class*=' rim-']:focus-visible {
  outline: 3px solid var(--rim-focus);
  outline-offset: 3px;
}

/*
 * Every transition and reveal in this plugin is driven by --rim-duration, so
 * zeroing the token here disables motion at the source. No blanket * override
 * and no !important.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rim-duration: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Details that read as designed rather than assembled. */
::selection {
  background: var(--rim-accent);
  color: var(--rim-on-accent);
}

.rim-eyebrow::selection,
.rim-title::selection {
  background: var(--rim-ink);
  color: var(--rim-surface);
}

@supports (scrollbar-color: red blue) {
  html {
    scrollbar-color: var(--rim-muted) var(--rim-surface-alt);
    scrollbar-width: thin;
  }
}