/* =========================================
   semantic tokens (your design system)
   ========================================= */

:root {
  /* colors */
  --aou-color-brand: #262261;
  --aou-color-neutral: #ffffff;
  --aou-color-text: #242136;
  --aou-color-text-inverse: #ffffff;
  --aou-color-text-link: #007BC7;
  --aou-color-background: #ffffff;
  --aou-color-background-alt: #F3F3F3;
  --aou-color-background-brand:#CCE5F4; 
  --aou-color-background-success:#ECF9F4;
  --aou-color-icon-success: #41BE8F;
  --aou-color-border: #C9C9C9;

  /* spacing scale */
  --aou-spacing-x-small: 0.25rem;
  --aou-spacing-small: 0.5rem;
  --aou-spacing-medium: 1rem;
  --aou-spacing-large: 1.5rem;

  /* typography */
  --aou-font-size-small: 14px;
  --aou-font-size-base: 16px;
  --aou-font-size-medium: 18px;
  --aou-font-size-large: 20px;
  --aou-font-size-x-large: 34px;
  --aou-font-size-xx-large: 50px;
  --aou-font-family: Helvetica, Arial, sans-serif;
  --aou-line-height: 1.5; /* unitless is preferred for line-height */
  --aou-letter-spacing-none: 0;

  /* font weight */
  --aou-font-weight-bold: 700;
  --aou-font-weight-normal: 500;
  
  /* radii & borders */
  --aou-border-radius-small: 0.25rem;
  --aou-border-radius-medium: 0.375rem;
  --aou-border-radius-large: 1.25rem;
  --aou-border-radius-round: 50rem;
  --aou-border-width-thin: 1px;
  --aou-border-width-thick: 2px;

  /* shadows */
  --aou-shadow-medium: 0 2px 4px rgba(0,0,0,0.2);

  /* breakpoints */
  --aou-breakpoint-small: 480px;
  --aou-breakpoint-medium: 768px;
  --aou-breakpoint-large: 1024px;
}

/* =========================================
   slds & sds global hooks mapped to semantic
   ========================================= */

:root {
  /* brand & neutrals */
  --slds-g-color-brand: var(--aou-color-brand);
  --slds-g-color-brand-primary: var(--aou-color-brand);
  --slds-g-color-brand-accessible: var(--aou-color-brand);
  /* --slds-g-color-neutral-base-100: var(--aou-color-background);
  --slds-g-color-neutral-base-200: var(--aou-color-background);
  --slds-g-color-neutral-base-300: var(--aou-color-background); */

  /* text colors */
  --slds-g-color-text-default: var(--aou-color-text);
  --slds-g-color-text-link: var(--aou-color-text-link);
  --slds-g-color-text-inverse: var(--aou-color-text-inverse);

  /* bg & border */
  --slds-g-color-background: var(--aou-color-background);
  --slds-g-color-background-alt: var(--aou-color-background-alt);
  --slds-g-color-border: var(--aou-color-border);

  /* spacing (map what you need; here all point to medium for consistency) */
  /* --slds-g-spacing-1: var(--aou-spacing-medium);
  --slds-g-spacing-2: var(--aou-spacing-medium);
  --slds-g-spacing-3: var(--aou-spacing-medium);
  --slds-g-spacing-4: var(--aou-spacing-medium);
  --slds-g-spacing-5: var(--aou-spacing-medium);
  --slds-g-spacing-6: var(--aou-spacing-medium);
  --slds-g-spacing-7: var(--aou-spacing-medium);
  --slds-g-spacing-8: var(--aou-spacing-medium); */

  /* type */
  /* --slds-g-font-size-1: var(--aou-font-size-base);
  --slds-g-font-size-2: var(--aou-font-size-base);
  --slds-g-font-size-3: var(--aou-font-size-base);
  --slds-g-font-size-4: var(--aou-font-size-base);
  --slds-g-font-size-5: var(--aou-font-size-base);
  --slds-g-font-size-6: var(--aou-font-size-base); */
  --slds-g-font-family: var(--aou-font-family);
  --slds-g-line-height: var(--aou-line-height);

  /* radii, borders, shadows */
  --slds-g-border-radius-small: var(--aou-border-radius-small);
  --slds-g-border-radius-medium: var(--aou-border-radius-medium);
  --slds-g-border-radius-large: var(--aou-border-radius-large);
  --slds-g-border-width-thin: var(--aou-border-width-thin);
  --slds-g-border-width-thick: var(--aou-border-width-thick);
  /* --slds-g-shadow-drop-small: var(--aou-shadow-medium);
  --slds-g-shadow-drop-medium: var(--aou-shadow-medium);
  --slds-g-shadow-drop-large: var(--aou-shadow-medium); */

  /* lwc media queries */
  --lwc-mqSmall: var(--aou-breakpoint-small);
  --lwc-mqMedium: var(--aou-breakpoint-medium);
  --lwc-mqLarge: var(--aou-breakpoint-large);

  /* sds mirrors */
  --sds-g-color-brand: var(--aou-color-brand);
  --sds-g-color-brand-primary: var(--aou-color-brand);
  --sds-g-color-brand-accessible: var(--aou-color-brand);
  /* --sds-g-color-neutral-base-100: var(--aou-color-background);
  --sds-g-color-neutral-base-200: var(--aou-color-background);
  --sds-g-color-neutral-base-300: var(--aou-color-background); */
  --sds-g-color-text-default: var(--aou-color-text);
  --sds-g-color-text-link: var(--aou-color-text-link);
  --sds-g-color-text-inverse: var(--aou-color-text-inverse);
  --sds-g-color-background: var(--aou-color-background);
  --sds-g-color-background-alt: var(--aou-color-background-alt);
  --sds-g-color-border: var(--aou-color-border);
  /* --sds-g-spacing-1: var(--aou-spacing-medium);
  --sds-g-spacing-2: var(--aou-spacing-medium);
  --sds-g-spacing-3: var(--aou-spacing-medium);
  --sds-g-spacing-4: var(--aou-spacing-medium);
  --sds-g-spacing-5: var(--aou-spacing-medium);
  --sds-g-spacing-6: var(--aou-spacing-medium);
  --sds-g-spacing-7: var(--aou-spacing-medium);
  --sds-g-spacing-8: var(--aou-spacing-medium); */
  /* --sds-g-font-size-1: var(--aou-font-size-base);
  --sds-g-font-size-2: var(--aou-font-size-base);
  --sds-g-font-size-3: var(--aou-font-size-base);
  --sds-g-font-size-4: var(--aou-font-size-base);
  --sds-g-font-size-5: var(--aou-font-size-base);
  --sds-g-font-size-6: var(--aou-font-size-base); */
  --sds-g-font-family: var(--aou-font-family);
  --sds-g-line-height: var(--aou-line-height);
  --sds-g-border-radius-small: var(--aou-border-radius-small);
  --sds-g-border-radius-medium: var(--aou-border-radius-medium);
  --sds-g-border-radius-large: var(--aou-border-radius-large);
  --sds-g-border-width-thin: var(--aou-border-width-thin);
  --sds-g-border-width-thick: var(--aou-border-width-thick);
  /* --sds-g-shadow-drop-small: var(--aou-shadow-medium);
  --sds-g-shadow-drop-medium: var(--aou-shadow-medium);
  --sds-g-shadow-drop-large: var(--aou-shadow-medium); */
}

/* =========================================
   common component hooks (slds + sds)
   ========================================= */

/* buttons */
:root {
  --slds-c-button-color-background: var(--aou-color-background);
  --sds-c-button-color-background: var(--aou-color-background);
  --slds-c-button-color-border: var(--aou-color-border);
  --sds-c-button-color-border: var(--aou-color-border);
  --slds-c-button-color-text: var(--aou-color-text);
  --sds-c-button-color-text: var(--aou-color-text);
  --slds-c-button-radius-border: var(--aou-border-radius-medium);
  --sds-c-button-radius-border: var(--aou-border-radius-medium);
  --slds-c-button-shadow: var(--aou-shadow-medium);
  --sds-c-button-shadow: var(--aou-shadow-medium);
}

/* inputs */
:root {
  --slds-c-input-color-background: var(--aou-color-background);
  --sds-c-input-color-background: var(--aou-color-background);
  --slds-c-input-color-border: var(--aou-color-border);
  --sds-c-input-color-border: var(--aou-color-border);
  --slds-c-input-color-text: var(--aou-color-text);
  --sds-c-input-color-text: var(--aou-color-text);
  --slds-c-input-radius-border: var(--aou-border-radius-medium);
  --sds-c-input-radius-border: var(--aou-border-radius-medium);
  --slds-c-input-shadow: var(--aou-shadow-medium);
  --sds-c-input-shadow: var(--aou-shadow-medium);
}

/* cards */
:root {
  --slds-c-card-color-background: var(--aou-color-background);
  --sds-c-card-color-background: var(--aou-color-background);
  --slds-c-card-color-border: var(--aou-color-border);
  --sds-c-card-color-border: var(--aou-color-border);
  --slds-c-card-color-text: var(--aou-color-text);
  --sds-c-card-color-text: var(--aou-color-text);
  --slds-c-card-radius-border: var(--aou-border-radius-large);
  --sds-c-card-radius-border: var(--aou-border-radius-large);
  --slds-c-card-shadow: var(--aou-shadow-medium);
  --sds-c-card-shadow: var(--aou-shadow-medium);
}

/* tables */
:root {
  --slds-c-table-color-background: var(--aou-color-background);
  --sds-c-table-color-background: var(--aou-color-background);
  --slds-c-table-color-border: var(--aou-color-border);
  --sds-c-table-color-border: var(--aou-color-border);
  --slds-c-table-color-text: var(--aou-color-text);
  --sds-c-table-color-text: var(--aou-color-text);
  --slds-c-table-radius-border: var(--aou-border-radius-small);
  --sds-c-table-radius-border: var(--aou-border-radius-small);
  --slds-c-table-shadow: var(--aou-shadow-medium);
  --sds-c-table-shadow: var(--aou-shadow-medium);
}

/* modals */
:root {
  --slds-c-modal-color-background: var(--aou-color-background);
  --sds-c-modal-color-background: var(--aou-color-background);
  --slds-c-modal-color-border: var(--aou-color-border);
  --sds-c-modal-color-border: var(--aou-color-border);
  --slds-c-modal-color-text: var(--aou-color-text);
  --sds-c-modal-color-text: var(--aou-color-text);
  --slds-c-modal-radius-border: var(--aou-border-radius-large);
  --sds-c-modal-radius-border: var(--aou-border-radius-large);
  --slds-c-modal-shadow: var(--aou-shadow-medium);
  --sds-c-modal-shadow: var(--aou-shadow-medium);
}

/* tabs */
:root {
  --slds-c-tabs-color-background: var(--aou-color-background);
  --sds-c-tabs-color-background: var(--aou-color-background);
  --slds-c-tabs-color-border: var(--aou-color-border);
  --sds-c-tabs-color-border: var(--aou-color-border);
  --slds-c-tabs-color-text: var(--aou-color-text);
  --sds-c-tabs-color-text: var(--aou-color-text);
  --slds-c-tabs-radius-border: var(--aou-border-radius-small);
  --sds-c-tabs-radius-border: var(--aou-border-radius-small);
  --slds-c-tabs-shadow: var(--aou-shadow-medium);
  --sds-c-tabs-shadow: var(--aou-shadow-medium);
}

/* toast */
:root {
  --slds-c-toast-color-background: var(--aou-color-background);
  --sds-c-toast-color-background: var(--aou-color-background);
  --slds-c-toast-color-border: var(--aou-color-border);
  --sds-c-toast-color-border: var(--aou-color-border);
  --slds-c-toast-color-text: var(--aou-color-text);
  --sds-c-toast-color-text: var(--aou-color-text);
  --slds-c-toast-radius-border: var(--aou-border-radius-medium);
  --sds-c-toast-radius-border: var(--aou-border-radius-medium);
  --slds-c-toast-shadow: var(--aou-shadow-medium);
  --sds-c-toast-shadow: var(--aou-shadow-medium);
}

/* alert */
:root {
  --slds-c-alert-color-background: var(--aou-color-background);
  --sds-c-alert-color-background: var(--aou-color-background);
  --slds-c-alert-color-border: var(--aou-color-border);
  --sds-c-alert-color-border: var(--aou-color-border);
  --slds-c-alert-color-text: var(--aou-color-text);
  --sds-c-alert-color-text: var(--aou-color-text);
  --slds-c-alert-radius-border: var(--aou-border-radius-small);
  --sds-c-alert-radius-border: var(--aou-border-radius-small);
  --slds-c-alert-shadow: var(--aou-shadow-medium);
  --sds-c-alert-shadow: var(--aou-shadow-medium);
}

/* breadcrumb */
:root {
  --slds-c-breadcrumb-color-background: var(--aou-color-background);
  --sds-c-breadcrumb-color-background: var(--aou-color-background);
  --slds-c-breadcrumb-color-border: var(--aou-color-border);
  --sds-c-breadcrumb-color-border: var(--aou-color-border);
  --slds-c-breadcrumb-color-text: var(--aou-color-text);
  --sds-c-breadcrumb-color-text: var(--aou-color-text);
  --slds-c-breadcrumb-radius-border: var(--aou-border-radius-small);
  --sds-c-breadcrumb-radius-border: var(--aou-border-radius-small);
  --slds-c-breadcrumb-shadow: var(--aou-shadow-medium);
  --sds-c-breadcrumb-shadow: var(--aou-shadow-medium);
}

/* pill */
:root {
  --slds-c-pill-color-background: var(--aou-color-background);
  --sds-c-pill-color-background: var(--aou-color-background);
  --slds-c-pill-color-border: var(--aou-color-border);
  --sds-c-pill-color-border: var(--aou-color-border);
  --slds-c-pill-color-text: var(--aou-color-text);
  --sds-c-pill-color-text: var(--aou-color-text);
  --slds-c-pill-radius-border: var(--aou-border-radius-large);
  --sds-c-pill-radius-border: var(--aou-border-radius-large);
  --slds-c-pill-shadow: var(--aou-shadow-medium);
  --sds-c-pill-shadow: var(--aou-shadow-medium);
}

/* avatar */
:root {
  --slds-c-avatar-color-background: var(--aou-color-background);
  --sds-c-avatar-color-background: var(--aou-color-background);
  --slds-c-avatar-color-border: var(--aou-color-border);
  --sds-c-avatar-color-border: var(--aou-color-border);
  --slds-c-avatar-color-text: var(--aou-color-text);
  --sds-c-avatar-color-text: var(--aou-color-text);
  --slds-c-avatar-radius-border: var(--aou-border-radius-large);
  --sds-c-avatar-radius-border: var(--aou-border-radius-large);
  --slds-c-avatar-shadow: var(--aou-shadow-medium);
  --sds-c-avatar-shadow: var(--aou-shadow-medium);
}

/* badge */
:root {
  --slds-c-badge-color-background: var(--aou-color-background);
  --slds-c-badge-color-background-brand: var(--aou-color-background-brand);
  --sds-c-badge-color-background: var(--aou-color-background);
  --sds-c-badge-color-background-brand: var(--aou-color-background-brand);
  --slds-c-badge-color-border: var(--aou-color-border);
  --sds-c-badge-color-border: var(--aou-color-border);
  --slds-c-badge-color-text: var(--aou-color-text);
  --sds-c-badge-color-text: var(--aou-color-text);
  --slds-c-badge-radius-border: var(--aou-border-radius-round);
  --sds-c-badge-radius-border: var(--aou-border-radius-round);
  --slds-c-badge-shadow: var(--aou-shadow-medium);
  --sds-c-badge-shadow: var(--aou-shadow-medium);
}

/* progress bar */
:root {
  --slds-c-progress-bar-color-background: var(--aou-color-background);
  --sds-c-progress-bar-color-background: var(--aou-color-background);
  --slds-c-progress-bar-color-border: var(--aou-color-border);
  --sds-c-progress-bar-color-border: var(--aou-color-border);
  --slds-c-progress-bar-color-text: var(--aou-color-text);
  --sds-c-progress-bar-color-text: var(--aou-color-text);
  --slds-c-progress-bar-radius-border: var(--aou-border-radius-small);
  --sds-c-progress-bar-radius-border: var(--aou-border-radius-small);
  --slds-c-progress-bar-shadow: var(--aou-shadow-medium);
  --sds-c-progress-bar-shadow: var(--aou-shadow-medium);
}