/* ============================================================
   ROARR! Mock Tokens
   Mirrors wordpress/theme.json so mocks look identical to prod.
   Variable names are the exact WP preset names — port-clean.
   Source of truth: DESIGN.md + theme.json. Edit those, not this.
   ============================================================ */

:root {
  /* ── Colours (theme.json palette) ───────────────────────── */
  --wp--preset--color--primary: #84BD00;
  --wp--preset--color--primary-hover: #9DDB16;
  --wp--preset--color--primary-dark: #4D7F00;
  --wp--preset--color--secondary: #FF8200;
  --wp--preset--color--amber: #FF8200;
  --wp--preset--color--yellow: #FEDB00;
  --wp--preset--color--pink: #BF4DA5;
  --wp--preset--color--purple: #440099;

  --wp--preset--color--deep-forest: #07100B;
  --wp--preset--color--surface-dark: #121510;
  --wp--preset--color--surface-raised: #1A1F16;
  --wp--preset--color--jungle-green: #1F3A25;

  --wp--preset--color--cream: #F5EBD8;
  --wp--preset--color--parchment: #EFE0C3;
  --wp--preset--color--warm-sand: #D8C295;

  --wp--preset--color--text-primary: #182015;
  --wp--preset--color--text-secondary: #42513A;
  --wp--preset--color--text-on-dark: #FFFFFF;
  --wp--preset--color--text-muted-dark: #D8D2C4;
  --wp--preset--color--border-light: rgba(24, 32, 21, 0.14);
  --wp--preset--color--border-dark: rgba(255, 255, 255, 0.14);
  --wp--preset--color--white: #FFFFFF;

  /* Legacy aliases — kept for theme parity */
  --wp--preset--color--accent: #84BD00;
  --wp--preset--color--brown: #182015;
  --wp--preset--color--bg-cream: #F5EBD8;
  --wp--preset--color--bg-surface: #EFE0C3;
  --wp--preset--color--bg-dark: #07100B;

  /* ── Fonts ──────────────────────────────────────────────── */
  --wp--preset--font-family--parkinsans: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wp--preset--font-family--adventure: 'Adventure', Impact, sans-serif;

  /* Local font-face for Parkinsans — loaded from Google Fonts in mocks for convenience */
  --font-body: var(--wp--preset--font-family--parkinsans);
  --font-display: var(--wp--preset--font-family--parkinsans);
  --font-heading: var(--wp--preset--font-family--parkinsans);
  --font-brand: var(--wp--preset--font-family--adventure);

  /* ── Font sizes (theme.json) ────────────────────────────── */
  --wp--preset--font-size--label-sm: 14px;
  --wp--preset--font-size--label-md: 14px;
  --wp--preset--font-size--body-xs: 14px;
  --wp--preset--font-size--body-sm: 16px;
  --wp--preset--font-size--body-md: 18px;
  --wp--preset--font-size--body-lg: 20px;
  --wp--preset--font-size--heading-xs: 22px;
  --wp--preset--font-size--heading-sm: 24px;
  --wp--preset--font-size--display-md: 28px;
  --wp--preset--font-size--display-lg: 40px;
  --wp--preset--font-size--display-xl: 52px;
  --wp--preset--font-size--display-2-xl: 60px;

  /* ── Spacing (theme.json semantic + scale) ──────────────── */
  --wp--preset--spacing--gutter-mobile: 24px;
  --wp--preset--spacing--gutter-tablet: 32px;
  --wp--preset--spacing--gutter-desktop: 48px;
  --wp--preset--spacing--section-mobile: 48px;
  --wp--preset--spacing--section-tablet: 64px;
  --wp--preset--spacing--section-desktop: 64px;
  --wp--preset--spacing--section-compact: 48px;
  --wp--preset--spacing--section-large: 128px;
  --wp--preset--spacing--section-compact-mobile: 32px;
  --wp--preset--spacing--section-compact-tablet: 48px;
  --wp--preset--spacing--section-compact-desktop: 48px;
  --wp--preset--spacing--section-large-mobile: 80px;
  --wp--preset--spacing--section-large-tablet: 96px;
  --wp--preset--spacing--section-large-desktop: 128px;
  --wp--preset--spacing--card-padding-mobile: 16px;
  --wp--preset--spacing--card-padding-tablet: 24px;
  --wp--preset--spacing--card-padding-desktop: 24px;
  --wp--preset--spacing--card-padding: 24px;
  --wp--preset--spacing--panel-padding-mobile: 24px;
  --wp--preset--spacing--panel-padding-tablet: 32px;
  --wp--preset--spacing--panel-padding-desktop: 48px;
  --wp--preset--spacing--panel-padding: 48px;

  /* ── Containers ─────────────────────────────────────────── */
  --container-width: 1240px;
  --container-wide-width: 1360px;
  --reading-width: 62ch;

  /* ── Shadows ────────────────────────────────────────────── */
  --wp--preset--shadow--soft: 0 10px 30px rgba(0, 0, 0, 0.18);
  --wp--preset--shadow--raised: 0 18px 50px rgba(0, 0, 0, 0.28);

  /* ── WP token aliases (used by ported global components) ── */
  --primary: var(--wp--preset--color--primary);
  --primary-hover: var(--wp--preset--color--primary-hover);
  --primary-dark: var(--wp--preset--color--primary-dark);
  --green: var(--wp--preset--color--primary);
  --deep-forest: var(--wp--preset--color--deep-forest);
  --surface-dark: var(--wp--preset--color--surface-dark);
  --surface-raised: var(--wp--preset--color--surface-raised);
  --surface-glass: rgba(18, 21, 16, 0.82);
  --text-on-dark: var(--wp--preset--color--text-on-dark);
  --text-secondary-dark: var(--wp--preset--color--text-muted-dark);
  --border-dark: var(--wp--preset--color--border-dark);
  --white: var(--wp--preset--color--white);
  --container-wide: var(--container-wide-width);
  --container: var(--container-width);
  --header-h: 72px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 0.3s;

  /* ── Icon sizes ─────────────────────────────────────────── */
  --icon-sm: 16px;   /* inline labels / chevrons */
  --icon-md: 24px;   /* default UI icon */
  --icon-lg: 32px;   /* featured / contact-card icons */

  /* ── Document layout ────────────────────────────────────── */
  /* Negative lift used by .roarr-paper AND .roarr-doc-meta — both
     translate up by this amount so meta + panel always move as a unit. */
  --doc-lift: -100px;
  --text-xs: 14px;
  --text-sm: 16px;
  --text-base: 18px;
  --text-lg: 20px;
  --text-xl: 24px;

  /* Production token aliases used by global ROARR block CSS */
  --secondary: var(--wp--preset--color--secondary);
  --amber: var(--wp--preset--color--amber);
  --yellow: var(--wp--preset--color--yellow);
  --jungle-green: var(--wp--preset--color--jungle-green);
  --cream: var(--wp--preset--color--cream);
  --parchment: var(--wp--preset--color--parchment);
  --warm-sand: var(--wp--preset--color--warm-sand);
  --text-primary: var(--wp--preset--color--text-primary);
  --text-secondary: var(--wp--preset--color--text-secondary);
  --text-muted: rgba(24, 32, 21, 0.65);
  --border-light: var(--wp--preset--color--border-light);
  --card-on-light: #FFF8EA;

  --display: 44px;
  --h1: 36px;
  --h2: 28px;
  --h3: 22px;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --space-120: 120px;
  --space-128: 128px;

  --gutter-mobile: var(--wp--preset--spacing--gutter-mobile);
  --gutter-tablet: var(--wp--preset--spacing--gutter-tablet);
  --gutter-desktop: var(--wp--preset--spacing--gutter-desktop);
  --section-padding-mobile: var(--wp--preset--spacing--section-mobile);
  --section-padding-tablet: var(--wp--preset--spacing--section-tablet);
  --section-padding-desktop: var(--wp--preset--spacing--section-desktop);
  --section-padding-compact-mobile: var(--wp--preset--spacing--section-compact-mobile);
  --section-padding-compact-tablet: var(--wp--preset--spacing--section-compact-tablet);
  --section-padding-compact-desktop: var(--wp--preset--spacing--section-compact-desktop);
  --section-padding-large-mobile: var(--wp--preset--spacing--section-large-mobile);
  --section-padding-large-tablet: var(--wp--preset--spacing--section-large-tablet);
  --section-padding-large-desktop: var(--wp--preset--spacing--section-large-desktop);
  --card-padding-mobile: var(--wp--preset--spacing--card-padding-mobile);
  --card-padding-tablet: var(--wp--preset--spacing--card-padding-tablet);
  --card-padding-desktop: var(--wp--preset--spacing--card-padding-desktop);
  --card-padding: var(--card-padding-desktop);
  --panel-padding-mobile: var(--wp--preset--spacing--panel-padding-mobile);
  --panel-padding-tablet: var(--wp--preset--spacing--panel-padding-tablet);
  --panel-padding-desktop: var(--wp--preset--spacing--panel-padding-desktop);
  --panel-padding: var(--panel-padding-desktop);
  --button-padding-inline: 24px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;
  --shadow-soft: var(--wp--preset--shadow--soft);
  --shadow-raised: var(--wp--preset--shadow--raised);
}

@media (min-width: 768px) {
  :root {
    --display: 52px;
    --h1: 44px;
    --h2: 36px;
    --h3: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --display: 60px;
    --h1: 52px;
    --h2: 40px;
    --h3: 28px;
  }
}