/**
 * Blue Ridge Core Theme — Design Tokens Reference
 *
 * This file does NOT redefine colors, type sizes, spacing, shadows, or radii —
 * those are already generated as CSS custom properties by theme.json (WordPress
 * native preset system). See docs/design-system/README.md for the full mapping
 * table of "token category → theme.json mechanism → generated variable name."
 *
 * This file exists for the handful of tokens that have NO theme.json home:
 *   1. Breakpoints — cannot be CSS custom properties (see below), documented
 *      here as the canonical reference for every @media rule in this codebase.
 *   2. A couple of layout-only custom properties (container gutter) that are
 *      computed values, not raw design tokens.
 *
 * Full documentation: docs/design-system/05-breakpoints.md
 */

/**
 * BREAKPOINTS — reference only, NOT usable as var() inside @media conditions.
 * CSS custom properties cannot be evaluated inside an @media (min-width: ...)
 * condition — this is a real CSS spec limitation, not an oversight. Every
 * @media rule in this codebase must hardcode one of these five values exactly.
 *
 *   sm:   480px  — large phones
 *   md:   768px  — tablets
 *   lg:  1024px  — small laptops
 *   xl:  1280px  — desktop
 *   2xl: 1536px  — large desktop
 *
 * Mobile-first: every rule below is written as (min-width: ...).
 */

:root {
  /* Fluid container gutter — see docs/design-system/06-containers.md */
  --container-padding-inline: clamp(1.25rem, 4vw, 3rem);

  /* Icon sizing grid — see docs/design-system/14-icons.md */
  --icon-size-sm: 1rem;    /* 16px */
  --icon-size-md: 1.5rem;  /* 24px */
  --icon-size-lg: 2rem;    /* 32px */
  --icon-size-xl: 3rem;    /* 48px */
}

/**
 * BRAND VARIABLES — sampled directly from the approved logo artwork
 * (assets/images/branding/blue-ridge-mini-split-pros-primary.png).
 * These alias the existing theme.json-generated tokens rather than
 * redefining color (see file header) — every existing token below was
 * already sourced from this exact logo in an earlier design pass, verified
 * again here by pixel-sampling the approved file directly:
 *
 *   navy   — sampled #002049 (mountains, wordmark)      → identical to preset|navy
 *   orange — sampled #F08C08 (sun)                      → identical to custom|heatingOrangeRaw
 *   green  — sampled #224D2D (trees / "MINI SPLIT" text) → matches preset|forest-green (#214D2C)
 *   blue   — sampled #649BE1 (snowflake)                 → matches custom|coolingBlueRaw;
 *            --brand-blue below uses the already-established AA-safe
 *            derivative (cooling-blue-text, 4.62:1 on white) instead of the
 *            raw swatch, because raw #649BE1 fails WCAG AA as text (2.87:1)
 *            — the same accessibility adjustment already applied to orange.
 *
 * --brand-cream and --brand-text are NOT sampled from the logo (the logo's
 * own background is plain white, and it has no body-text color) — they are
 * the existing, deliberately-chosen neutrals that were built to complement
 * these exact sampled hues.
 */
:root {
  --brand-navy: var(--wp--preset--color--navy);                 /* #002049 */
  --brand-navy-rgb: 0, 32, 73;
  --brand-blue: var(--wp--preset--color--cooling-blue-text);    /* #2974D4 */
  --brand-green: var(--wp--preset--color--forest-green);        /* #214D2C */
  --brand-orange: var(--wp--preset--color--heating-orange-text); /* #AD6506 */
  --brand-orange-raw: var(--wp--custom--color--heating-orange-raw); /* #F08C08 — glow/shadow use only, see buttons.css */
  --brand-cream: #FAF7F2;
  --brand-white: var(--wp--preset--color--white);               /* #FFFFFF */
  --brand-text: var(--wp--preset--color--gray-900);              /* #1A1F26 */
}

/**
 * Quick reference — the WordPress-generated variables this system's component
 * CSS actually consumes (see the individual .css files for real usage):
 *
 *   Colors:      var(--wp--preset--color--{slug})          e.g. --wp--preset--color--navy
 *   Dev colors:  var(--wp--custom--color--{key})            e.g. --wp--custom--color--navy-hover
 *   Font family: var(--wp--preset--font-family--{slug})
 *   Font size:   var(--wp--preset--font-size--{slug})
 *   Spacing:     var(--wp--preset--spacing--{slug})
 *   Shadow:      var(--wp--preset--shadow--{slug})
 *   Radius:      var(--wp--custom--radius--{key})
 *   Motion:      var(--wp--custom--motion--{key})
 *   Type detail: var(--wp--custom--typography--{key})
 *   Container:   var(--wp--style--global--content-size / --wide-size)
 */