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

.aou-variation {
    /* colors */
    --aou-color-brand: #262262;
    --aou-color-neutral: #ffffff;
    --aou-color-text: #566774;
    --aou-color-weak: #262262;
    --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-icon-weak: #566774;
    --aou-color-border: #C9C9C9;
    --aou-color-progress-path: #CEA6FE;

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

    /* 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: 28px;
    --aou-font-size-xx-large: 34px;
    --aou-font-size-xxx-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
   ========================================= */

    /* 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 */
    --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);

    --slds-c-button-brand-color-background: var(--aou-color-brand);
    --sds-c-button-brand-color-background: var(--aou-color-brand);

    /* inputs */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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 */
    --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);


    /* iconography */
    --slds-c-icon-color-foreground-default: var(--aou-color-icon-weak);
    --sds-c-icon-color-foreground-default: var(--aou-color-icon-weak);
}

.aou-variation .aou-progress-ring .slds-progress-ring__path {
    --slds-g-color-success-base-50: var(--aou-color-progress-path);
    --lwc-colorBackgroundSuccessDark: var(--aou-color-progress-path);
}

.aou-variation .aou-progress-ring circle.slds-progress-ring__path {
    display: none;
}