/* Short names for the design tokens. The VALUES live in theme.json (palette,
   fonts, sizes, spacing, custom); this file only gives them names that are
   pleasant to type. Never write a hex value, a font name or a spacing value
   anywhere else. To restyle the site, change theme.json. */

:root {
  --color-bg:               var(--wp--preset--color--bg);
  --color-surface:          var(--wp--preset--color--surface);
  --color-surface-alt:      var(--wp--preset--color--surface-alt);
  --color-quote:            var(--wp--preset--color--quote);
  --color-text:             var(--wp--preset--color--text);
  --color-text-muted:       var(--wp--preset--color--text-muted);
  --color-text-subtle:      var(--wp--preset--color--text-subtle);
  --color-primary:          var(--wp--preset--color--primary);
  --color-primary-hover:    var(--wp--preset--color--primary-hover);
  --color-primary-contrast: var(--wp--preset--color--primary-contrast);
  --color-gold:             var(--wp--preset--color--gold);   /* logo and icons only */
  --color-coral:            var(--wp--preset--color--coral);  /* one small dot, never text */
  --color-border:           var(--wp--preset--color--border);
  --color-border-strong:    var(--wp--preset--color--border-strong);
  --color-danger:           var(--wp--preset--color--danger);
  --color-focus:            var(--wp--preset--color--primary);

  --font-body:    var(--wp--preset--font-family--body);
  --font-heading: var(--wp--preset--font-family--heading);

  --text-xs:  var(--wp--preset--font-size--xs);
  --text-sm:  var(--wp--preset--font-size--sm);
  --text-md:  var(--wp--preset--font-size--md);
  --text-lg:  var(--wp--preset--font-size--lg);
  --text-xl:  var(--wp--preset--font-size--xl);
  --text-2xl: var(--wp--preset--font-size--xxl);
  --text-3xl: var(--wp--preset--font-size--display);
  --text-4xl: var(--wp--preset--font-size--hero);

  --space-1: var(--wp--preset--spacing--10);
  --space-2: var(--wp--preset--spacing--20);
  --space-3: var(--wp--preset--spacing--30);
  --space-4: var(--wp--preset--spacing--40);
  --space-5: var(--wp--preset--spacing--50);
  --space-6: var(--wp--preset--spacing--60);
  --space-7: var(--wp--preset--spacing--70);
  --space-8: var(--wp--preset--spacing--80);
  --space-9: var(--wp--preset--spacing--90);

  --radius-sm:   var(--wp--custom--radius--sm);
  --radius-md:   var(--wp--custom--radius--md);
  --radius-lg:   var(--wp--custom--radius--lg);
  --shadow-card: var(--wp--custom--shadow--card);
  --shadow-menu: var(--wp--custom--shadow--menu);
  --transition-fast: var(--wp--custom--transition--fast);
  --transition-base: var(--wp--custom--transition--base);
  --transition-slow: var(--wp--custom--transition--slow);

  --container:      var(--wp--style--global--wide-size, 72rem);
  --container-text: var(--wp--style--global--content-size, 44rem);
}