/**
 * Palmetto Publishing — Design Tokens
 * ====================================
 * Single source of truth for brand colors, typography, gradients, and layout.
 *
 * Consumers:
 * - Kadence theme: brand-palette module reads PHP `ppb_brand_tokens()`,
 *   which mirrors these values, and seeds the Kadence global palette.
 * - Child theme `kadence-palmettopublishing/style.css`: reference these
 *   custom properties directly (or `@import` this file).
 * - palmetto-blocks ACF Blocks: reference these custom properties in
 *   block-styles.css and per-block CSS.
 *
 * SOURCE OF VALUES
 * Reconciled from two Figma exports (2026-05-05):
 * - `src/utility.css`   — Figma Variables (canonical names)
 * - `src/utility-2.css` — Figma Styles (broader: includes typography + gradients)
 * Where names differ, both are kept as aliases for clarity.
 *
 * UPDATE FLOW
 * 1. Edit values here.
 * 2. Mirror to `includes/brand-tokens.php` (PHP-side parity).
 * 3. Re-seed Kadence: WP-CLI `wp palmetto seed-brand --force` or
 *    Palmetto → Settings → Brand → "Re-apply brand tokens to Kadence".
 *
 * NAMING
 * --palmetto-<token>           raw values from Figma
 * --palmetto-brand-<role>      semantic alias (block CSS uses these)
 * --palmetto-grad-<name>       gradients
 * --palmetto-font-<role>       font family stacks
 * --palmetto-size-<slug>       editor font-size presets (px)
 * --palmetto-scale-<element>   heading scale (px)
 * --palmetto-weight-<element>  font weight (per element)
 * --palmetto-line-<usage>      line-height (unitless)
 * --palmetto-space-<slug>      vertical rhythm (px)
 * --palmetto-layout-<setting>  layout primitives
 */

:root {
	/* ------------------------------------------------------------------------
	 * Colors — primary palette (verbatim from Figma exports)
	 * --------------------------------------------------------------------- */

	--palmetto-green:           #05868C;
	--palmetto-teal:            #05868C;   /* alias */
	--palmetto-dark-green:      #004F59;
	--palmetto-teal-dark:       #004F59;   /* alias */
	--palmetto-light-green:     #83C1C0;
	--palmetto-teal-light:      #83C1C0;   /* alias */

	--palmetto-dark-blue:       #1F2A44;
	--palmetto-blue:            #1F2A44;   /* alias */
	--palmetto-dark-blue-60:    #1F2A4499; /* navy at 60% — soft text/dividers */

	--palmetto-gold:            #BD9749;
	--palmetto-dark-gold:       #BD9749;   /* alias */
	--palmetto-cream:           #F6CE9E;   /* warm peach */
	--palmetto-gold-light:      #F6CE9E;   /* alias for cream */
	--palmetto-light-gold:      #F9D1A3;   /* lighter peach */

	--palmetto-burnt-orange:    #BD6042;
	--palmetto-terracotta:      #BD6042;   /* alias */

	--palmetto-beige:           #ECDCCB;
	--palmetto-light-cream:     #FDF5EC;

	/* Greys
	 *
	 * Figma library uses British spelling (`mid-grey`, `stroke-grey`, …); the
	 * US-spelled variants stay as aliases for backwards-compat with existing
	 * code paths until a project-wide grey/gray cleanup. Prefer British
	 * naming in NEW SCSS — those names match Figma's variable tokens. */
	--palmetto-grey-neutral:    #F0F0F0;   /* utility.css `grey` — alt page bg */
	--palmetto-light-grey:      #E5E5E5;
	--palmetto-light-gray:      #E5E5E5;   /* US alias */
	--palmetto-grey:            #CCCCCC;
	--palmetto-gray:            #CCCCCC;   /* US alias */
	--palmetto-mid-grey:        #B3B3B3;
	--palmetto-mid-gray:        #B3B3B3;   /* US alias */
	--palmetto-dark-grey:       #333333;
	--palmetto-dark-gray:       #333333;   /* US alias */

	/* Standards (not in Figma export, needed by the system) */
	--palmetto-white:            #FFFFFF;
	--palmetto-black:            #000000;

	/* ------------------------------------------------------------------------
	 * Colors — semantic aliases
	 * Block-styles.css and child theme should reference THESE, not raw colors.
	 * --------------------------------------------------------------------- */

	--palmetto-brand-primary:       var(--palmetto-green);          /* Kadence palette1 */
	--palmetto-brand-primary-dark:  var(--palmetto-dark-green);     /* Kadence palette2 */
	--palmetto-brand-heading:       var(--palmetto-dark-blue);      /* Kadence palette3 */
	--palmetto-brand-body:          var(--palmetto-dark-gray);      /* Kadence palette4 */
	--palmetto-brand-body-soft:     var(--palmetto-dark-blue-60);   /* navy at 60% — for caption/meta */
	--palmetto-brand-muted:         var(--palmetto-mid-gray);       /* Kadence palette5 */
	--palmetto-brand-accent:        var(--palmetto-light-green);    /* Kadence palette6 */
	--palmetto-brand-bg-soft:       var(--palmetto-beige);          /* Kadence palette7 — soft section bg */
	--palmetto-brand-bg-alt:        var(--palmetto-light-cream);    /* Kadence palette8 — alt section bg */
	--palmetto-brand-bg:            var(--palmetto-white);          /* Kadence palette9 — page bg */

	--palmetto-brand-warm-primary:  var(--palmetto-gold);
	--palmetto-brand-warm-soft:     var(--palmetto-cream);
	--palmetto-brand-warm-pale:     var(--palmetto-light-gold);
	--palmetto-brand-warm-alt:      var(--palmetto-burnt-orange);

	--palmetto-brand-stroke:        var(--palmetto-mid-grey);   /* was stroke-grey alias — same value, mid-grey is the canonical name post 2026-05-25 */

	/* ------------------------------------------------------------------------
	 * Gradients (from Figma styles)
	 * --------------------------------------------------------------------- */

	--palmetto-grad-blue-orange:        linear-gradient(129deg, #1F2A44 0%, #BD6042 100%);
	--palmetto-grad-darknavy-gold:      linear-gradient(111deg, #1A152E 0%, #BD9749 100%);
	--palmetto-grad-teal-cream:         linear-gradient(180deg, #05868C 0%, #F6CE9E 100%);
	--palmetto-grad-gold-white:         linear-gradient(61deg,  #BD9749 0%, #FFFFFF 100%);
	--palmetto-grad-corner-gold:        linear-gradient(30deg,  #BD9749 0%, #FFFFFF 100%);
	--palmetto-grad-corner-green:       linear-gradient(30deg,  #05868C 0%, #FFFFFF 100%);
	--palmetto-grad-corner-orange:      linear-gradient(30deg,  #BD6042 0%, #FFFFFF 100%);
	--palmetto-grad-corner-blue:        linear-gradient(30deg,  #1F2A44 0%, #FFFFFF 100%);
	--palmetto-grad-glow-teal:          linear-gradient(140deg, #069CA2 0%, rgba(87,70,34,0) 100%);

	/* ------------------------------------------------------------------------
	 * Typography — families (Google Fonts, loaded by typography module)
	 *
	 * Body/UI: Plus Jakarta Sans (full weight range 200–800).
	 * Headings: Libre Baskerville (400 + 700 only, 400 reads elegant on serif).
	 * --------------------------------------------------------------------- */

	--palmetto-font-primary:    "Plus Jakarta Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--palmetto-font-secondary:  "Libre Baskerville", Georgia, "Times New Roman", serif;

	/* ------------------------------------------------------------------------
	 * Typography — heading scale (Figma styles, 2026-05-05)
	 *
	 * Note: Figma uses MEDIUM (500) for h1/h2, SEMIBOLD (600) for h3,
	 * BOLD (700) for h4. Smaller sizes than BASED. Heading face is the
	 * serif `big-caslon-fb`; medium weight reads elegant, not heavy.
	 * --------------------------------------------------------------------- */

	--palmetto-scale-h1:   54px;
	--palmetto-scale-h2:   40px;
	--palmetto-scale-h3:   26px;
	--palmetto-scale-h4:   24px;
	--palmetto-scale-h5:   20px;
	--palmetto-scale-h6:   18px;   /* not in Figma export — extrapolated */
	--palmetto-scale-body: 18px;

	--palmetto-weight-h1:     500;
	--palmetto-weight-h2:     500;
	--palmetto-weight-h3:     600;
	--palmetto-weight-h4:     700;
	--palmetto-weight-h5:     500;
	--palmetto-weight-h6:     500;
	--palmetto-weight-body:   500;
	--palmetto-weight-strong: 600;
	--palmetto-weight-bold:   700;

	--palmetto-line-body:    1.6;
	--palmetto-line-heading: 1.2;

	/* ------------------------------------------------------------------------
	 * Typography — body & label sizes (Figma styles)
	 * --------------------------------------------------------------------- */

	--palmetto-size-body-18:       18px;  /* default body */
	--palmetto-size-body-16:       16px;  /* small body / list / card */
	--palmetto-size-body-16-caps:  16px;  /* uppercase emphasis (used with letter-spacing in CSS) */
	--palmetto-size-small-14:      14px;  /* meta, captions */

	/* Editor font-size dropdown presets (legacy slugs from BASED) */
	--palmetto-size-tiny:    12px;
	--palmetto-size-x-small: 14px;
	--palmetto-size-small:   16px;
	--palmetto-size-medium:  18px;
	--palmetto-size-large:   20px;
	--palmetto-size-x-large: 26px;   /* aligned with h3 */
	--palmetto-size-huge:    40px;   /* aligned with h2 */
	--palmetto-size-display: 54px;   /* aligned with h1 */

	/* ------------------------------------------------------------------------
	 * Spacing scale (from Design_system.jpg annotations)
	 * --------------------------------------------------------------------- */

	--palmetto-space-xs:           6px;   /* small radius / micro */
	--palmetto-space-sm:          36px;   /* element spacing (small) */
	--palmetto-space-md:          40px;   /* card content padding */
	--palmetto-space-lg:          60px;   /* card outer padding */
	--palmetto-space-section:     62px;   /* medium section spacing */
	--palmetto-space-section-lg: 120px;   /* large section spacing */

	/* ------------------------------------------------------------------------
	 * Border radius scale
	 * --------------------------------------------------------------------- */

	--palmetto-radius-sm:    4px;   /* pills */
	--palmetto-radius-md:    8px;   /* images */
	--palmetto-radius-lg:   50px;   /* diag containers */
	--palmetto-radius-xl:  100px;   /* diag media */

	/* ------------------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------------- */

	--palmetto-layout-content-width: 1500px;
}