/*
 * 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-red-500:   #E85D5D;  /* form validation / destructive */
	--bc-red-400:   #FF6363;  /* destructive badge fill/border on dark */
	--bc-red-300:   #FF9A9A;  /* destructive text on dark */
	--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-error:         var(--bc-red-500);
	--bc-color-error-text:    var(--bc-red-300);
	--bc-color-error-fill:    var(--bc-red-400);  /* for alpha-mixed badge fills/borders */
	--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:        1440px;  /* main site container */
	--bc-max-width-prose:  900px;   /* long-form reading (blog, docs body) */
	--bc-max-width-narrow: 560px;   /* forms, focused CTAs */

	/* Minimum width for the Description column on the six reference tables.
	 * Those tables scroll horizontally inside the article at every viewport, so
	 * this trades scroll distance the reader already has for row height they
	 * were paying for in blank space: the description is the tallest cell by
	 * far, and when it is narrow it sets a row height the short columns beside
	 * it cannot fill. Measured 2026-10-10 at 375px — on
	 * /classes/token-revocation-reasons/ the tallest row goes 844px → 193px and
	 * the table 2149px → 784px, for 19% more table width. */
	--bc-table-desc-min:   440px;

	/* Minimum width for the Method column on the class methods table — the only
	 * reference column holding a full signature rather than a short name. Same
	 * trade as the Description floor: auto layout squeezed it to 106-137px on
	 * pages whose descriptions are short, so an 82-character signature wrapped
	 * to 231px and the row was mostly blank. Measured 2026-10-10 at 375px —
	 * /classes/membership-buyup-decline-repository/ 759px → 423px of rows and
	 * /classes/support-signed-link/ 516px → 348px, settling tables at 881px. */
	--bc-table-signature-min: 280px;

	/* Minimum width for the first column of a prose content table — the label
	 * column on a Field/Description, Panel/What it does or Card/What it shows
	 * table, in support docs and on marketing pages.
	 *
	 * This is the floor that makes the column WIDTH CONSISTENT, which is a
	 * distinct complaint from it being narrow: /docs/email-merge-tags/ renders
	 * the same Tag column at a different width in every table on the page,
	 * because auto layout sizes each one from its own longest word. Measured
	 * 2026-10-19 on live /docs/settings-reference/ at 375px — its ten tables
	 * had first columns of 75, 87, 94, 98, 104, 107, 110, 114, 151 and 179px;
	 * this settles all ten at 144. At 1280px the same page went 84 → 151
	 * (Control), 88 → 144 (Value) and 91 → 148 (Setting).
	 *
	 * ⚠ 144px is a label measure, not a description one, and is deliberately
	 * well below --bc-table-desc-min: it has to fit "Connected shows" on one
	 * line without forcing a 2-column table to scroll when it would otherwise
	 * fit the column. */
	--bc-table-label-min:  144px;

	/* Width of the show/hide password toggle on wp-login.php, and the matching
	 * right padding on the password input it sits inside.
	 *
	 * ⚠ One token for both deliberately: the button is absolutely positioned
	 * over the input's right edge, so if its width and the input's
	 * padding-right ever drift apart the toggle either overlaps the typed
	 * password or leaves a dead gap. They were two separate literals until
	 * 2026-10-19 and are now a single value by construction.
	 *
	 * 3rem comfortably clears the 20px Dashicons glyph and gives the button a
	 * 48px hit target, above the 44px usually wanted for touch. */
	--bc-login-pw-toggle: 3rem;


	/* --- 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;


	/* --- z-index scale ---
	 * Small integer stops so relative ordering stays legible without
	 * accidental collisions. Anything higher than z-skip-link is a bug.
	 */
	--bc-z-header:     10;    /* .bc-site-header (sticky-ready) */
	--bc-z-dropdown:   20;    /* .bc-search-dropdown, future menus */
	--bc-z-skip-link:  1000;  /* skip-to-content on focus */

}


/*
 * 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
 */