/*
 * COMPONENT TOKENS — components-version-0
 *
 * References semantic tokens from semantic.css.
 * Never references primitives directly.
 * Never uses raw hex values — one exception noted inline.
 */

:root {

  /* ─── Button shared padding & radius ─── */
  --button-padding-top:    var(--space-1-5);
  --button-padding-bottom: var(--space-1-5);
  --button-padding-left:   var(--space-2);
  --button-padding-right:  var(--space-2);
  --button-border-radius:         99px;
  --button-border-stroke: 0px;

  /* ─── Button: Primary ─── */
  --button-primary-background-color:          var(--background-brand-primary);
  --button-primary-background-color-hover:    var(--background-brand-primary-hover);
  --button-primary-background-color-disabled: var(--background-disabled-default);
  --button-primary-text-color:                var(--text-brand-on-primary);
  --button-primary-text-color-hover:          var(--text-brand-on-primary);
  --button-primary-text-color-disabled:       var(--text-on-disabled);
  --button-primary-border-color:              transparent;
  --button-primary-border-color-hover:        transparent;
  --button-primary-border-color-disabled:     var(--border-disabled);
  --button-primary-border-stroke:             var(--button-border-stroke);
  --button-primary-border-radius:             var(--button-border-radius);
  --button-primary-padding-top:               var(--button-padding-top);
  --button-primary-padding-bottom:            var(--button-padding-bottom);
  --button-primary-padding-left:              var(--button-padding-left);
  --button-primary-padding-right:             var(--button-padding-right);
  --button-primary-icon-color:                var(--icon-on-light);
  --button-primary-icon-color-hover:          var(--icon-on-light);
  --button-primary-icon-color-disabled:       var(--icon-disabled);

  /* ─── Button: Secondary (ghost) ─── */
  --button-secondary-background-color:          var(--background-brand-secondary);
  --button-secondary-background-color-hover:    var(--background-brand-secondary-hover);
  --button-secondary-background-color-disabled: var(--background-disabled-default);
  --button-secondary-text-color:                var(--text-brand-on-secondary);
  --button-secondary-text-color-hover:          var(--text-brand-on-secondary);
  --button-secondary-text-color-disabled:       var(--text-on-disabled);
  --button-secondary-border-color:              transparent;
  --button-secondary-border-color-hover:        transparent;
  --button-secondary-border-color-disabled:     var(--border-disabled);
  --button-secondary-border-stroke:             var(--button-border-stroke);
  --button-secondary-border-radius:             var(--button-border-radius);
  --button-secondary-padding-top:               var(--button-padding-top);
  --button-secondary-padding-bottom:            var(--button-padding-bottom);
  --button-secondary-padding-left:              var(--button-padding-left);
  --button-secondary-padding-right:             var(--button-padding-right);
  --button-secondary-icon-color:                var(--icon-on-light);
  --button-secondary-icon-color-hover:          var(--icon-on-light);
  --button-secondary-icon-color-disabled:       var(--icon-disabled);

  /* ─── Button: Neutral (outline) ─── */
  --button-neutral-background-color:          transparent;
  --button-neutral-background-color-hover:    var(--neutrals-200);
  --button-neutral-background-color-disabled: transparent;
  --button-neutral-text-color:                var(--neutrals-600);
  --button-neutral-text-color-hover:          var(--text-on-light-primary);
  --button-neutral-text-color-disabled:       var(--text-on-disabled);
  --button-neutral-border-color:              var(--neutrals-600);
  --button-neutral-border-color-hover:        var(--neutrals-200);
  --button-neutral-border-color-disabled:     var(--border-disabled);
  --button-neutral-border-stroke:             var(--stroke-border);
  --button-neutral-border-radius:             var(--button-border-radius);
  --button-neutral-padding-top:               var(--button-padding-top);
  --button-neutral-padding-bottom:            var(--button-padding-bottom);
  --button-neutral-padding-left:              var(--button-padding-left);
  --button-neutral-padding-right:             var(--button-padding-right);
  --button-neutral-icon-color:                var(--icon-on-light);
  --button-neutral-icon-color-hover:          var(--icon-on-light);
  --button-neutral-icon-color-disabled:       var(--border-disabled);

  /* ─── Input ─── */
  --input-background-default:    var(--neutrals-0);
  --input-background-hover:      var(--neutrals-100);
  --input-background-focus:      var(--neutrals-200);
  --input-background-disabled:   var(--background-disabled-default);
  --input-text-default:          var(--text-on-light-primary);
  --input-text-disabled:         var(--text-on-disabled);
  --input-text-placeholder:      var(--neutrals-500);
  --input-border-default:        var(--border-on-light);
  --input-border-hover:          var(--border-on-light-strong);
  --input-border-focus:          var(--border-focus);
  --input-border-error:          var(--border-danger);
  --input-border-radius:         var(--radius-default);
  --input-border-stroke:         var(--stroke-border);
  --input-padding:               var(--padding-default);

  /* ─── Card ─── */
  /* Token defaults */
  --card-radius:                 var(--radius-default);
  --card-inner-radius:           0;
  --card-padding-top:            var(--space-3);
  --card-padding-bottom:         var(--space-3);
  --card-padding-left:           var(--space-3);
  --card-padding-right:          var(--space-3);
  --card-image-ratio-horizontal: 1.25;
  --card-image-ratio-vertical:   0.75;
  --card-background-color:       var(--background-neutral-light);
  --card-border-stroke:          var(--stroke-border);
  --card-border-color:           var(--border-on-light);
  --card-overlay-color:          var(--background-neutral-light-hover);
  --card-overlay-opacity:        0;
  --card-gap:                    var(--space-1);

  /* ─── Accordion ─── */
  --accordion-radius:            var(--radius-default);
  --accordion-border-stroke:     var(--stroke-border);
  --accordion-border-color:      var(--border-on-light);
  --accordion-background-color:  var(--background-neutral-light);
  --accordion-padding-top:       var(--space-3);
  --accordion-padding-bottom:    var(--space-3);
  --accordion-padding-left:      var(--space-3);
  --accordion-padding-right:     var(--space-3);
  --accordion-gap:               var(--space-1);

  /* ─── Banner ─── */
  --banner-radius: var(--radius-default);

  /* ─── Links ─── */
  --link-text-default:                 var(--brand-primary-tint);
  --link-text-hover:                   var(--brand-primary-shade);

  /* Menu item */
  --menu-item-text-default:            var(--text-on-dark);
  --menu-item-text-hover:              var(--brand-primary-shade);
  --menu-item-text-active:             var(--brand-primary-shade);
  --menu-item-icon-default:            var(--icon-on-dark);
  --menu-item-icon-hover:              var(--brand-primary-shade);
  --menu-item-icon-active:             var(--brand-primary-shade);

}