/*
 * Benecaster Theme — Design Tokens
 *
 * Single source of truth for all design values.
 * Never hardcode colors, sizes, or fonts in site.css — define them here first.
 * All site.css rules are scoped to .bc-page; tokens are global.
 *
 * Palette basis: approved dark-theme mockups (deep navy bg, amber CTA, teal
 * success), consistent with the Benecaster plugin admin and the shop pages.
 * Documented in the content repo: marketing/shop/_SESSION-HANDOFF.md.
 */

:root {

	/* --- Palette (raw brand values) --- */
	--bc-navy-900:  #1B2140;  /* page bg */
	--bc-navy-800:  #202650;  /* subtle band between sections */
	--bc-navy-700:  #242B4D;  /* elevated surfaces / cards */
	--bc-navy-600:  #333A5C;  /* borders on dark */
	--bc-amber-500: #F0A500;  /* primary accent / CTA */
	--bc-amber-400: #FFB933;  /* accent hover / link hover */
	--bc-amber-600: #D89400;  /* accent pressed */
	--bc-teal-500:  #2DB67D;  /* success / check */
	--bc-teal-400:  #45C892;  /* success hover */
	--bc-white:     #FFFFFF;
	--bc-off-white: #E6E8F0;  /* body text on dark */
	--bc-gray-400:  #A0A5C0;  /* muted secondary text on dark */


	/* --- Semantic color roles --- */
	--bc-color-text:          var(--bc-off-white);
	--bc-color-text-strong:   var(--bc-white);
	--bc-color-text-muted:    var(--bc-gray-400);
	--bc-color-bg:            var(--bc-navy-900);
	--bc-color-bg-subtle:     var(--bc-navy-800);
	--bc-color-bg-elevated:   var(--bc-navy-700);
	--bc-color-border:        var(--bc-navy-600);
	--bc-color-accent:        var(--bc-amber-500);
	--bc-color-accent-hover:  var(--bc-amber-400);
	--bc-color-accent-pressed: var(--bc-amber-600);
	--bc-color-success:       var(--bc-teal-500);
	--bc-color-link:          var(--bc-amber-500);
	--bc-color-link-hover:    var(--bc-amber-400);


	/* --- Type families --- */
	--bc-font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bc-font-mono: 'JetBrains Mono', Consolas, Menlo, 'Courier New', monospace;


	/* --- Type scale (1.25 modular, 16px base) --- */
	--bc-text-xs:   0.75rem;    /* 12px — captions, labels */
	--bc-text-sm:   0.875rem;   /* 14px — meta, secondary */
	--bc-text-base: 1rem;       /* 16px — body */
	--bc-text-lg:   1.25rem;    /* 20px — lead paragraph */
	--bc-text-xl:   1.5rem;     /* 24px — h3, section intros */
	--bc-text-2xl:  2rem;       /* 32px — h2 */
	--bc-text-3xl:  2.5rem;     /* 40px — h1 on interior pages */
	--bc-text-4xl:  3.5rem;     /* 56px — hero display */

	--bc-leading-tight:  1.2;   /* headings */
	--bc-leading-normal: 1.5;   /* body / UI */
	--bc-leading-loose:  1.75;  /* long-form prose */


	/* --- Spacing (4px base) --- */
	--bc-space-1:  0.25rem;   /* 4px  */
	--bc-space-2:  0.5rem;    /* 8px  */
	--bc-space-3:  0.75rem;   /* 12px */
	--bc-space-4:  1rem;      /* 16px */
	--bc-space-6:  1.5rem;    /* 24px */
	--bc-space-8:  2rem;      /* 32px */
	--bc-space-12: 3rem;      /* 48px */
	--bc-space-16: 4rem;      /* 64px */
	--bc-space-24: 6rem;      /* 96px */


	/* --- Layout containers --- */
	--bc-max-width:        1200px;  /* main site container */
	--bc-max-width-prose:  720px;   /* long-form reading (blog, docs body) */
	--bc-max-width-narrow: 560px;   /* forms, focused CTAs */


	/* --- Radius --- */
	--bc-radius-sm:   4px;
	--bc-radius-md:   8px;
	--bc-radius-lg:   12px;
	--bc-radius-full: 9999px;


	/* --- Transitions --- */
	--bc-transition-fast:   150ms ease;
	--bc-transition-normal: 250ms ease;

}


/*
 * Breakpoints (documentation only — CSS custom properties cannot be used
 * inside @media queries in vanilla CSS). Copy these literal values into
 * @media rules in site.css.
 *
 *   sm:  640px   phones landscape / small tablets
 *   md:  768px   tablets
 *   lg:  1024px  small laptops
 *   xl:  1280px  desktops
 */