/* =========================================================
   Brand shortcut layer
   theme.json is the single source of truth. These short names
   point to it, so brand CSS written with --espresso, --gold, etc.
   (like doodle-button.css) works unchanged. Change a color in
   theme.json and everything here follows. Never put hex codes here.
   ========================================================= */
:root {
  --espresso: var(--wp--preset--color--espresso);
  --terracotta: var(--wp--preset--color--terracotta);
  --cream: var(--wp--preset--color--cream);
  --olive: var(--wp--preset--color--olive);
  --gold: var(--wp--preset--color--gold);
  --espresso-text: var(--wp--preset--color--espresso-text);
  --gold-soft: var(--wp--preset--color--gold-soft);
  --terracotta-dark: var(--wp--preset--color--terracotta-dark);
  --olive-dark: var(--wp--preset--color--olive-dark);
  --gold-dark: var(--wp--preset--color--gold-dark);
  --wheat: var(--wp--preset--color--wheat);
  --soft-terracotta: var(--wp--preset--color--soft-terracotta);
  --soft-olive: var(--wp--preset--color--soft-olive);
  --card: var(--wp--preset--color--card);
  --white-warm: var(--wp--preset--color--white-warm);
  --olive-shade: var(--wp--preset--color--olive-shade);
  --success: var(--wp--preset--color--success);

  --font-drummond: var(--wp--preset--font-family--drummond);
  --font-archivo: var(--wp--preset--font-family--archivo);
  --font-archivo-narrow: var(--wp--preset--font-family--archivo-narrow);

  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-xl: var(--wp--custom--radius--xl);
  --radius-2xl: var(--wp--custom--radius--2-xl);
  --radius-3xl: var(--wp--custom--radius--3-xl);
  --radius-hero: var(--wp--custom--radius--hero);

  --shadow-soft: var(--wp--preset--shadow--soft);
  --shadow-card: var(--wp--preset--shadow--card);
  --shadow-dark: var(--wp--preset--shadow--dark);

  --frame-inset: var(--wp--custom--frame--inset);
  --frame-gap: var(--wp--custom--frame--gap);
  --frame-radius: var(--radius-3xl);
  --ease: var(--wp--custom--ease);

  /* Illustration colors (theme.json > custom > art) */
  --art-olive-line: var(--wp--custom--art--olive-line);
  --art-pattern: var(--wp--custom--art--pattern);
}
@media (max-width: 760px) {
  :root { --frame-inset: 12px; --frame-gap: 12px; --frame-radius: var(--radius-lg); }
}

/* Small site-wide basics from the style guide */
::selection { background: var(--soft-terracotta); color: var(--espresso); }
:focus-visible { outline: 3px solid rgba(173, 88, 41, 0.42); outline-offset: 3px; }

/* Framed layout rule: any Group with the Panel style becomes a rounded,
   inset panel so nothing colored touches the screen edge. */
.wp-block-group.is-style-panel {
  margin-inline: var(--frame-inset);
  margin-block: var(--frame-gap);
  border-radius: var(--frame-radius);
}