/* =============================================================================
   CF Design System — GLOBAL + SEMANTIC tokens (tier 1 + tier 2)
   =============================================================================

   This file is the FOUNDATION of the CF custom-Elementor design system. It is
   owned by the cf-elementor-custom-widgets plugin (NOT the theme): if the
   widgets ship from this plugin, their tokens and default styles ship from it
   too. The theme is only a visual consumer / fallback.

   Every CF component (button, and future card / badge / alert / hero / cta …)
   builds on the variables defined here instead of hard-coding hex/px values.
   See DESIGN-SYSTEM.md (plugin root) for the full convention.

       Tier 1  PRIMITIVE  raw, context-free values        --cf-color-blue-700
       Tier 2  SEMANTIC   intent / role, ref. primitives   --cf-color-action
       Tier 3  COMPONENT  per-component, ref. semantic      --cf-btn-bg
                          (lives in each component's own CSS file, e.g.
                           assets/css/cf-button.css)

   Rule of thumb:
   - Components reference SEMANTIC tokens where a role exists
     (action / success / surface / disabled / focus).
   - Components reference PRIMITIVE tokens for raw scales
     (spacing, radius, font size) that have no higher-level meaning.
   - Components NEVER hard-code a hex or a px that belongs in a token.
   ============================================================================= */

:root {

	/* -------------------------------------------------------------------------
	   TIER 1 — PRIMITIVES
	   Naming: --cf-<category>-<scale>. Context-free; never used directly by a
	   component if a semantic token covers the role.
	   ------------------------------------------------------------------------- */

	/* Color — brand & neutrals (match the existing theme palette). */
	--cf-color-white:       #ffffff;
	--cf-color-blue-700:    #00338e;  /* brand blue            */
	--cf-color-blue-800:    #002266;  /* brand blue, darker    */
	--cf-color-green-600:   #357d2b;  /* brand green           */
	--cf-color-green-700:   #2a6322;  /* brand green, darker   */
	--cf-color-neutral-50:  #f7f7f7;  /* very light, near-white (disabled fill) */
	--cf-color-neutral-100: #f0f0f0;
	--cf-color-neutral-200: #e6e6e6;
	--cf-color-neutral-300: #e0e0e0;
	--cf-color-neutral-350: #c3c3c3;  /* light grey (disabled text/icon)        */
	--cf-color-neutral-400: #d6d6d6;
	--cf-color-neutral-500: #b2b1b0;
	--cf-color-neutral-600: #a4a4a4;

	/* Spacing scale (4px base). */
	--cf-space-1:   4px;
	--cf-space-2:   8px;
	--cf-space-2-5: 10px;
	--cf-space-3:   12px;
	--cf-space-4:   16px;
	--cf-space-6: 24px;
	--cf-space-7: 28px;

	/* Radius scale. */
	--cf-radius-sm:   4px;
	--cf-radius-md:   8px;
	--cf-radius-pill: 999px;

	/* Border widths. */
	--cf-border-width: 1px;

	/* Typography. */
	--cf-font-family-base:     "Gotham", "Gotham Book", sans-serif;
	--cf-font-size-md:         16px;
	--cf-font-weight-medium:   500;
	--cf-font-weight-semibold: 600;
	--cf-line-height-tight:    1.2;
	--cf-line-height-md:       24px;

	/* Sizing — interactive control heights. */
	--cf-control-height-md: 48px;

	/* Motion. */
	--cf-transition-base: 0.15s ease-in-out;

	/* -------------------------------------------------------------------------
	   TIER 2 — SEMANTIC
	   Naming: --cf-color-<role>[-<modifier>]. Express intent; reference
	   primitives. Components target THESE so a palette change ripples
	   everywhere from one place.
	   ------------------------------------------------------------------------- */

	/* Action (primary / blue). */
	--cf-color-action:       var(--cf-color-blue-700);
	--cf-color-action-hover: var(--cf-color-blue-800);
	--cf-color-on-action:    var(--cf-color-white);

	/* Success (green). */
	--cf-color-success:       var(--cf-color-green-600);
	--cf-color-success-hover: var(--cf-color-green-700);
	--cf-color-on-success:    var(--cf-color-white);

	/* Surface & lines. */
	--cf-color-surface: var(--cf-color-white);
	--cf-color-border:  var(--cf-color-neutral-400);

	/* Disabled — shared across all components for a consistent dead state.
	   Very light near-white fill + light grey text/icon, per Figma. */
	--cf-color-disabled-bg:     var(--cf-color-neutral-50);
	--cf-color-disabled-fg:     var(--cf-color-neutral-350);
	--cf-color-disabled-border: var(--cf-color-neutral-400);

	/* Focus ring (accessibility) — width is global so every component's
	   keyboard focus looks identical; the ring COLOR is set per component
	   (e.g. --cf-btn-ring) so it can match the component's hue. */
	--cf-focus-ring-width:     2px;
	--cf-focus-ring-gap:       2px;
	--cf-focus-ring-gap-color: var(--cf-color-white);
}