/* ============================================================
 * Goodyear Next Branding — Entry Point
 *
 * Load order:
 * 1. colors.css        — Color utilities using Polymer semantic tokens
 * 2. typography.css    — Type scale using Polymer viewport tokens
 * 3. buttons.css       — .goodyear-btn-* classes using Polymer button tokens
 * 4. links.css         — .text-link, .goodyear-link-arrow
 * 5. icons.css         — 'global-icons' font definitions
 * 6. components.css    — Reusable component classes (card, badge, alert, grid, flex)
 * 7. tokens.css        — Additional brand tokens not present in PolymerBranding
 * 8. overrides.css     — SLDS/DXP overrides hub; imports all overrides-*.css sub-files
 * ============================================================ */

@import url('./colors.css');
@import url('./typography.css');
@import url('./buttons.css');
@import url('./links.css');
@import url('./icons.css');
@import url('./components.css');
@import url('./tokens.css');
@import url('./overrides.css');

/* ============================================================
 * Backwards Compatibility Bridge
 *
 * Maps legacy token names used by LWC components to values
 * sourced from PolymerBranding light-theme.css.
 *
 * Tokens whose names already match in light-theme.css
 * (--color-primary-*, --color-secondary-*, --color-ui-*,
 * --border-radius-*, --background-base) need no bridge entry.
 * ============================================================ */

:root {
  /* --------------------------------------------------------
   * Font Families
   * ------------------------------------------------------ */
  --font-family-primary:   var(--type-family-primary), 'PT Sans', sans-serif;
  --font-family-heading:   var(--type-heading-family), 'PT Sans', sans-serif;
  --font-family-display:   var(--type-display-family), 'Arial Narrow', sans-serif;
  --font-family-paragraph: var(--type-paragraph-family), 'PT Sans', sans-serif;
  --font-family-action:    var(--type-button-family), sans-serif;

  /* --------------------------------------------------------
   * Font Weights
   * ------------------------------------------------------ */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* --------------------------------------------------------
   * Goodyear Color Aliases
   * (shorthand names used across colors.css, buttons.css etc.)
   * ------------------------------------------------------ */
  --goodyear-blue:          var(--color-primary-100);
  --goodyear-blue-150:      var(--color-primary-150);
  --goodyear-blue-125:      var(--color-primary-125);
  --goodyear-blue-100:      var(--color-primary-100);
  --goodyear-blue-75:       var(--color-primary-75);
  --goodyear-blue-50:       var(--color-primary-50);
  --goodyear-blue-25:       var(--color-primary-25);
  --goodyear-blue-10:       var(--color-primary-10);
  --goodyear-blue-5:        var(--color-primary-5);
  --goodyear-yellow:        var(--color-secondary-100);
  --goodyear-yellow-100:    var(--color-secondary-100);
  --goodyear-yellow-50:     var(--color-secondary-50);
  --goodyear-yellow-banner: #fedb00;

  /* Typo alias in colors.css — bridge to canonical name */
  --gy-color-primary-125: var(--color-primary-125);

  /* --------------------------------------------------------
   * UI Colors not present in light-theme.css
   * ------------------------------------------------------ */
  --color-ui-10:       #e9e9e9;
  --color-ui-black:    #000000;
  --background-gray-10: #e9e9e9;

  /* --------------------------------------------------------
   * Spacing  (old names → new size tokens)
   * ------------------------------------------------------ */
  --spacing-xs:   var(--size-4);
  --spacing-sm:   var(--size-8);
  --spacing-md:   var(--size-16);
  --spacing-lg:   var(--size-24);
  --spacing-xl:   var(--size-32);
  --spacing-xxl:  var(--size-48);
  --spacing-xxxl: var(--size-64);

  /* --------------------------------------------------------
   * Shadows  (light-theme has depth color vars, not full values)
   * ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px 0 var(--color-depth-4);
  --shadow-md: 0 4px 6px -1px var(--color-depth-8);
  --shadow-lg: 0 10px 15px -3px var(--color-depth-8);
  --shadow-xl: 0 20px 25px -5px var(--color-depth-12);
  --shadow-depth-light-d2: 0px 4px 4px 0px var(--color-depth-4), 0px 8px 16px 0px var(--color-depth-8);
  --shadow-depth-dark-d2:  0px 4px 4px 0px var(--color-depth-12), 0px 8px 16px 0px var(--color-depth-24);

  /* --------------------------------------------------------
   * Border
   * ------------------------------------------------------ */
  --border-width:           var(--border-width-sm);
  --border-color-primary:   var(--border-light);
  --border-color-secondary: var(--border-medium);

  /* --------------------------------------------------------
   * Display Typography  (sourced from light-theme.css)
   * ------------------------------------------------------ */
  --display-lg-size:                 var(--type-display-lg-size-desktop);
  --display-lg-lineheight:           var(--type-display-lg-line-height-desktop);
  --display-lg-letterspacing:        var(--type-display-lg-letter-spacing-desktop);
  --display-lg-weight:               var(--type-display-lg-weight-desktop);
  --display-lg-size-tablet:          var(--type-display-lg-size-tablet);
  --display-lg-lineheight-tablet:    var(--type-display-lg-line-height-tablet);
  --display-lg-letterspacing-tablet: var(--type-display-lg-letter-spacing-tablet);
  --display-lg-size-mobile:          var(--type-display-lg-size-mobile);
  --display-lg-lineheight-mobile:    var(--type-display-lg-line-height-mobile);
  --display-lg-letterspacing-mobile: var(--type-display-lg-letter-spacing-mobile);

  --display-md-size:                 var(--type-display-md-size-desktop);
  --display-md-lineheight:           var(--type-display-md-line-height-desktop);
  --display-md-letterspacing:        var(--type-display-md-letter-spacing-desktop);
  --display-md-weight:               var(--type-display-md-weight-desktop);
  --display-md-size-tablet:          var(--type-display-md-size-tablet);
  --display-md-lineheight-tablet:    var(--type-display-md-line-height-tablet);
  --display-md-letterspacing-tablet: var(--type-display-md-letter-spacing-tablet);
  --display-md-size-mobile:          var(--type-display-md-size-mobile);
  --display-md-lineheight-mobile:    var(--type-display-md-line-height-mobile);
  --display-md-letterspacing-mobile: var(--type-display-md-letter-spacing-mobile);

  /* --------------------------------------------------------
   * Paragraph tokens not self-defined in typography.css
   * ------------------------------------------------------ */
  --paragraph-lg-letterspacing: 0px;
  --paragraph-lg-weight:        400;
  --paragraph-md-letterspacing: 0px;
  --paragraph-md-weight:        400;

  --paragraph-sm-size:          var(--type-paragraph-sm-size-desktop);
  --paragraph-sm-lineheight:    var(--type-paragraph-sm-line-height-desktop);
  --paragraph-sm-letterspacing: 0px;
  --paragraph-sm-weight:        400;

  /* Responsive paragraph variants used in typography.css media queries */
  --paragraph-lg-size-tablet:          var(--type-paragraph-lg-size-tablet);
  --paragraph-lg-lineheight-tablet:    var(--type-paragraph-lg-line-height-tablet);
  --paragraph-lg-letterspacing-tablet: 0px;

  --paragraph-lg-size-mobile:          var(--type-paragraph-lg-size-mobile);
  --paragraph-lg-lineheight-mobile:    var(--type-paragraph-lg-line-height-mobile);
  --paragraph-lg-letterspacing-mobile: 0px;
}