/*
 * COMPONENT TOKENS
 *
 * Synced from Figma "Rhoe with DS" (mvd98DtBokM5FiV5Zk51iU),
 * Components collection = Version 0.
 *
 * Mirrors the Figma alias chains. Tokens that point straight at a primitive
 * are a known gap in Figma (no semantic token yet), not a CSS decision.
 * Never uses raw hex values.
 */

:root {

  /* ─── Button shared padding, radius & stroke ─── */
  --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:  0px;
  --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-on-light-primary);
  --button-primary-text-color-disabled:       var(--text-on-disabled);
  --button-primary-border-color:              var(--neutrals-transparent);
  --button-primary-border-color-hover:        var(--neutrals-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-dark);
  --button-primary-icon-color-hover:          var(--icon-on-light);
  --button-primary-icon-color-disabled:       var(--icon-disabled);

  /* ─── Button: Secondary ─── */
  --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:              var(--neutrals-transparent);
  --button-secondary-border-color-hover:        var(--neutrals-transparent);
  --button-secondary-border-color-disabled:     var(--border-disabled);
  --button-secondary-border-stroke:             var(--stroke-border);
  --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:          var(--background-neutral-light);
  --button-neutral-background-color-hover:    var(--background-neutral-light-hover);
  --button-neutral-background-color-disabled: var(--background-disabled-default);
  --button-neutral-text-color:                var(--text-on-light-primary);
  --button-neutral-text-color-hover:          var(--text-on-light-primary);
  --button-neutral-text-color-disabled:       var(--text-on-disabled);
  --button-neutral-border-color:              var(--border-on-light);
  --button-neutral-border-color-hover:        var(--border-on-light);
  --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(--icon-disabled);

  /* ─── Input ─── */
  --input-background-default:    var(--neutrals-0);
  --input-background-hover:      var(--neutrals-100);
  --input-background-focus:      var(--neutrals-200);
  --input-background-disabled:   var(--states-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 ─── */
  --card-radius:                 var(--radius-default);
  --card-inner-radius:           0;
  --card-padding-top:            var(--space-0);
  --card-padding-bottom:         var(--space-0);
  --card-padding-left:           var(--space-0);
  --card-padding-right:          var(--space-0);
  --card-image-ratio-horizontal: 1.25;
  --card-image-ratio-vertical:   0.8;
  --card-background-color:       var(--background-neutral-light);
  --card-border-stroke:          var(--stroke-border);
  --card-border-color:           var(--border-on-light);
  --card-gap:                    var(--space-1);
  /* Not in Figma Components yet (Effects collection, synced when a component needs it) */
  --card-overlay-color:          var(--background-neutral-light-hover);
  --card-overlay-opacity:        0;

  /* ─── 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-0);
  --accordion-padding-bottom:    var(--space-0);
  --accordion-padding-left:      var(--space-0);
  --accordion-padding-right:     var(--space-0);
  --accordion-gap:               var(--space-1);

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

  /* ─── Tag ─── */
  --tag-border:                  0px;
  --tag-radius:                  var(--radius-default);
  --tag-padding:                 var(--padding-default);

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

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

}