/* =============================================================
   Design tokens — CSS custom properties
   Source of truth for all LED Theme styling.

   Typography tokens bridge to inc/typography.php (--led-* vars).
   When the plugin was active it set --led-*; now the theme does it.
   Fallback values are the built-in defaults from LED_Theme_Typography.
   ============================================================= */

:root {

	/* ----------------------------------------------------------------
	   Brand palette — Primary (green)
	   ---------------------------------------------------------------- */
	--color-primary-950: #0e2600;
	--color-primary-900: #003d1a;
	--color-primary-800: #005f2a;
	--color-primary-700: #067338;
	--color-primary-600: #0b8c43;
	--color-primary-500: #46b54a;
	--color-primary-400: #45b449;
	--color-primary-300: #9bd67a;
	--color-primary-200: #caefd0;
	--color-primary-100: #d9efda;
	--color-primary-50:  #eaf5ef;

	--color-primary:          var(--color-primary-600);
	--color-primary-hover:    var(--color-primary-900);
	--color-primary-bright:   #54d159;
	--color-primary-muted:    #b4e2b6;

	/* ----------------------------------------------------------------
	   Brand palette — Secondary (blue)
	   ---------------------------------------------------------------- */
	--color-secondary-950: #001220;
	--color-secondary-900: #011a37;
	--color-secondary-800: #013a6b;
	--color-secondary-700: #0a5db8;
	--color-secondary-600: #1c86ff;
	--color-secondary-500: #2bb2ff;
	--color-secondary-400: #0eade8;
	--color-secondary-300: #8ecaff;
	--color-secondary-200: #bbdeff;
	--color-secondary-100: #daebff;
	--color-secondary-50:  #e3f2ff;

	--color-secondary:       var(--color-secondary-600);
	--color-secondary-hover: var(--color-secondary-900);

	/* ----------------------------------------------------------------
	   Warning palette
	   ---------------------------------------------------------------- */
	--color-warning-900: #8c2419;
	--color-warning-800: #b53228;
	--color-warning-700: #cc3d32;
	--color-warning-600: #e6473e;
	--color-warning-500: #fd7251;
	--color-warning-400: #fd9078;
	--color-warning-300: #fdad98;
	--color-warning-200: #fdcdc0;
	--color-warning-100: #fce4e0;
	--color-warning-50:  #faeae8;

	--color-warning: var(--color-warning-600);

	/* ----------------------------------------------------------------
	   Accent — Orange (tertiary buttons)
	   ---------------------------------------------------------------- */
	--color-orange-600: #ff6e4b;
	--color-orange-500: #ff6e4b;
	--color-orange-400: #ff9b3f;
	--color-orange-100: #ffe3dc;
	--color-orange-50:  #fff5f2;

	/* ----------------------------------------------------------------
	   Neutral palette
	   ---------------------------------------------------------------- */
	--color-neutral-900: #000000;
	--color-neutral-800: #2b2b2b;
	--color-neutral-700: #565656;
	--color-neutral-600: #737373;
	--color-neutral-500: #8f8f8f;
	--color-neutral-400: #a5a5a5;
	--color-neutral-300: #bfbfbf;
	--color-neutral-200: #d1d1d1;
	--color-neutral-100: #ededed;
	--color-neutral-50:  #f5f5f5;
	--color-neutral-0:   #ffffff;

	/* Legacy gray scale — mapped to brand neutrals / tints */
	--color-white:    var(--color-neutral-0);
	--color-black:    var(--color-neutral-900);
	--color-gray-100: var(--color-neutral-100);
	--color-gray-200: var(--color-neutral-200);
	--color-gray-400: var(--color-neutral-400);
	--color-gray-500: var(--color-neutral-500);
	--color-gray-700: var(--color-neutral-700);
	--color-gray-900: var(--color-neutral-900);

	/* ----------------------------------------------------------------
	   Semantic / surface colours
	   ---------------------------------------------------------------- */
	--color-bg:          var(--color-white);
	--color-bg-footer:   var(--color-white);
	--color-bg-subtle:   var(--color-primary-50);
	--color-border:      var(--color-neutral-200);
	--color-text:        var(--color-black);
	--color-text-muted:  var(--color-neutral-700);
	--color-text-subtle: var(--color-neutral-400);
	--color-link:        var(--color-secondary);
	--color-success:     var(--color-primary);
	--color-success-light: var(--color-primary-400);
	--color-danger:      var(--color-warning);

	/* ----------------------------------------------------------------
	   Buttons — style-guide tokens
	   ---------------------------------------------------------------- */
	--btn-height:           49px;
	--btn-height-bordered:  calc(var(--btn-height) - (2 * var(--btn-border-width)));
	--btn-padding-x:        1.5rem;
	--btn-radius:           8px;
	--btn-border-width:     1px;

	/* Primary (solid green) */
	--btn-primary-bg:           var(--color-primary-500);
	--btn-primary-bg-hover:     var(--color-primary-bright);
	--btn-primary-bg-disabled:  var(--color-primary-100);
	--btn-primary-color:          var(--color-white);
	--btn-primary-color-disabled: var(--color-white);

	/* Secondary — green outline */
	--btn-secondary-green-bg:              var(--color-white);
	--btn-secondary-green-border:          var(--color-primary-500);
	--btn-secondary-green-color:           var(--color-primary-500);
	--btn-secondary-green-bg-hover:        var(--color-primary-bright);
	--btn-secondary-green-color-hover:     var(--color-white);
	--btn-secondary-green-border-disabled: var(--color-primary-muted);
	--btn-secondary-green-color-disabled:  var(--color-primary-muted);

	/* Secondary — dark outline */
	--btn-secondary-dark-bg:              var(--color-white);
	--btn-secondary-dark-border:          var(--color-black);
	--btn-secondary-dark-color:           var(--color-black);
	--btn-secondary-dark-bg-hover:        var(--color-black);
	--btn-secondary-dark-color-hover:     var(--color-white);
	--btn-secondary-dark-border-disabled: var(--color-neutral-100);
	--btn-secondary-dark-color-disabled:  var(--color-neutral-100);

	/* Tertiary — white / text */
	--btn-tertiary-bg:              var(--color-white);
	--btn-tertiary-color:           var(--color-black);
	--btn-tertiary-bg-hover:        var(--color-primary-bright);
	--btn-tertiary-color-hover:     var(--color-white);
	--btn-tertiary-bg-disabled:     var(--color-neutral-100);
	--btn-tertiary-color-disabled:  var(--color-white);

	/* Tertiary — orange */
	--btn-orange-bg:          var(--color-orange-600);
	--btn-orange-bg-hover:    var(--color-orange-400);
	--btn-orange-bg-disabled: var(--color-orange-100);
	--btn-orange-color:       var(--color-white);

	/* Tertiary — blue */
	--btn-blue-bg:          var(--color-secondary);
	--btn-blue-bg-hover:    var(--color-secondary-500);
	--btn-blue-bg-disabled: var(--color-secondary-100);
	--btn-blue-color:       var(--color-white);

	/* Link-style */
	--btn-link-color:          var(--color-secondary);
	--btn-link-color-hover:    var(--color-secondary-500);
	--btn-link-color-disabled: var(--color-neutral-400);
	--btn-link-opacity-disabled: 0.4;

	/* Table cells — bridge to inc/typography.php (--led-table-*) */
	--table-cell-border:         var(--led-table-cell-border, 1px solid var(--color-border));
	--table-cell-color:          var(--led-table-cell-color, var(--color-text-muted));
	--table-cell-color-desktop:  var(--led-table-cell-color-desktop, var(--color-text));
	--table-cell-bg:             var(--led-table-cell-bg, color-mix(in srgb, var(--color-border) 10%, transparent));

	/* ----------------------------------------------------------------
	   Typography — font families
	   Bridge to led-fonts-plugin (--led-*-font-family).
	   Fallbacks used when plugin is inactive.
	   ---------------------------------------------------------------- */
	--font-family-heading-fallback: Oswald, "Arial Black", Arial, sans-serif;
	--font-family-body-fallback:    Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-family-button-fallback: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-family-price-fallback:   Oswald, "Arial Black", Arial, sans-serif;
	--font-family-heading: var(--led-heading-font-family, var(--font-family-heading-fallback));
	--font-family-body:    var(--led-body-font-family,    var(--font-family-body-fallback));
	--font-family-button:  var(--led-button-font-family,  var(--font-family-button-fallback));
	--font-family-price:   var(--led-price-font-family,   var(--font-family-price-fallback));

	/* ----------------------------------------------------------------
	   Typography — font sizes (mobile → desktop)
	   Bridge to inc/typography.php (--led-* custom properties).
	   ---------------------------------------------------------------- */

	/* Mobile */
	--font-size-h1:    var(--led-h1-size,              30px);
	--font-size-h2:    var(--led-h2-size,              20px);
	--font-size-h3:    var(--led-h3-size,              18px);
	--font-size-h4:    var(--led-h4-size,              17px);
	--font-size-h5:    var(--led-h5-size,              16px);
	--font-size-body:  var(--led-body-font-size,       15px);
	--font-size-small: var(--led-body-small-font-size, 13px);
	--font-size-btn:   var(--led-button-font-size,     16px);
	--font-size-price: var(--led-price-font-size,      16px);
	--font-size-list:  var(--led-list-font-size,       15px);

	/* Desktop */
	--font-size-h1-desktop:    var(--led-h1-size-desktop,              40px);
	--font-size-h2-desktop:    var(--led-h2-size-desktop,              25px);
	--font-size-h3-desktop:    var(--led-h3-size-desktop,              20px);
	--font-size-h4-desktop:    var(--led-h4-size-desktop,              17px);
	--font-size-h5-desktop:    var(--led-h5-size-desktop,              16px);
	--font-size-body-desktop:  var(--led-body-font-size-desktop,       16px);
	--font-size-small-desktop: var(--led-body-small-font-size-desktop, 14px);
	--font-size-btn-desktop:   var(--led-button-font-size-desktop,     18px);
	--font-size-price-desktop: var(--led-price-font-size-desktop,      25px);
	--font-size-list-desktop:  var(--led-list-font-size-desktop,       16px);

	/* Utility scale */
	--font-size-xs:   0.75rem;    /* 12px */
	--font-size-sm:   0.8125rem;  /* 13px */
	--font-size-base: 0.875rem;   /* 14px */
	--font-size-md:   0.9375rem;  /* 15px */
	--font-size-lg:   1rem;       /* 16px */

	/* ----------------------------------------------------------------
	   Typography — weights
	   ---------------------------------------------------------------- */
	--font-weight-heading: var(--led-heading-weight, 600);
	--font-weight-body:    var(--led-body-weight,    400);
	--font-weight-button:  var(--led-button-weight,  700);
	--font-weight-price:   var(--led-price-weight,   700);

	/* Utility */
	--font-weight-normal:   400;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	/* ----------------------------------------------------------------
	   Typography — text transform
	   ---------------------------------------------------------------- */
	--text-transform-heading: var(--led-heading-case, uppercase);
	--text-transform-body:    var(--led-body-case,    none);
	--text-transform-button:  var(--led-button-case,  none);
	--text-transform-price:   var(--led-price-case,   none);

	/* ----------------------------------------------------------------
	   Typography — line-heights & letter-spacing
	   ---------------------------------------------------------------- */
	--line-height-heading: var(--led-heading-line-height, 1.1em);
	--line-height-body:    var(--led-body-line-height,    1.5em);
	--line-height-button:  var(--led-button-line-height,  1.5em);
	--line-height-price:   var(--led-price-line-height,   1.5em);
	--line-height-base:    1.5;
	--line-height-relaxed: 1.6;

	--letter-spacing-heading: var(--led-heading-letter-spacing, normal);
	--letter-spacing-body:    var(--led-body-letter-spacing,    normal);
	--letter-spacing-button:  var(--led-button-letter-spacing,  normal);
	--letter-spacing-price:   var(--led-price-letter-spacing,   normal);
	--letter-spacing-wide:    0.06em;
	--letter-spacing-wider:   0.07em;

	/* ----------------------------------------------------------------
	   Typography — heading margins
	   ---------------------------------------------------------------- */
	--heading-margin-top:             var(--led-heading-margin-top,             1.25rem);
	--heading-margin-bottom:          var(--led-heading-margin-bottom,          0.5rem);
	--heading-margin-top-desktop:     var(--led-heading-margin-top-desktop,     1.25rem);
	--heading-margin-bottom-desktop:  var(--led-heading-margin-bottom-desktop,  1rem);

	/* ----------------------------------------------------------------
	   Typography — list indent
	   ---------------------------------------------------------------- */
	--list-padding:         var(--led-list-padding,         0 12px);
	--list-padding-desktop: var(--led-list-padding-desktop, 0 24px);

	/* ----------------------------------------------------------------
	   Spacing scale
	   ---------------------------------------------------------------- */
	--space-1:  0.25rem;   /*  4px */
	--space-2:  0.5rem;    /*  8px */
	--space-3:  0.75rem;   /* 12px */
	--space-4:  1rem;      /* 16px */
	--space-5:  1.25rem;   /* 20px */
	--space-6:  1.5rem;    /* 24px */
	--space-8:  2rem;      /* 32px */
	--space-10: 2.5rem;    /* 40px */
	--space-12: 3rem;      /* 48px */

	/* ----------------------------------------------------------------
	   Border & radius
	   ---------------------------------------------------------------- */
	--border-width:        1px;
	--border-color:        var(--color-border);
	--border-radius-sm:    4px;
	--border-radius-md:    var(--led-image-border-radius, 8px);  /* matches plugin */
	--border-radius-full:  9999px;

	/* ----------------------------------------------------------------
	   Transitions
	   ---------------------------------------------------------------- */
	--transition-fast: 0.15s ease;
	--transition-base: 0.18s ease;
	--transition-slow: 0.3s ease;

	/* ----------------------------------------------------------------
	   Breakpoints — reference only (use directly in @media queries)
	   --bp-sm:  580px
	   --bp-md:  980px
	   --bp-lg:  1200px
	   ---------------------------------------------------------------- */
}