/**
 * TS Design System: foundation tokens.
 *
 * `space-*` is an internal master scale. Public spacing utilities live in
 * utilities/spacing.css; historical aliases live in legacy/spacing.css.
 */

:root {
  --tsds-gap-factor: 1;
  --tsds-stack-factor: 1;
  --tsds-pad-factor: 1;
  --tsds-flow-factor: 1;
  --tsds-ig-factor: 1;
  --tsds-section-vertical-factor: 1;
  --tsds-section-side-factor-boxed: 1;
  --tsds-section-side-factor-full: 1;

  --gap-factor: 1.5;
  --stack-factor: 1;
  --pad-factor: 1;
  --flow-factor: 1;
  --ui-gap-factor: 1;

  --space-0: 0rem;
  --space-xxxs: 0.25rem;
  --space-xxs: 0.5rem;
  --space-xs: clamp(0.5rem, 1.2vw, 1rem);
  --space-s: clamp(1rem, 1.8vw, 1.5rem);
  --space-m: clamp(1.5rem, 2.4vw, 2rem);
  --space-l: clamp(2rem, 3vw, 2.5rem);
  --space-xl: clamp(2.5rem, 3.8vw, 3rem);
  --space-xxl: clamp(3rem, 5.2vw, 4rem);
  --space-xxxl: clamp(4rem, 6.8vw, 5rem);

  --gap-0: 0rem;
  --gap-xxxs: calc(var(--space-xxxs) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-xxs: calc(var(--space-xxs) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-xs: calc(var(--space-xs) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-s: calc(var(--space-s) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-m: calc(var(--space-m) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-l: calc(var(--space-l) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-xl: calc(var(--space-xl) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-xxl: calc(var(--space-xxl) * var(--gap-factor) * var(--tsds-gap-factor));
  --gap-xxxl: calc(var(--space-xxxl) * var(--gap-factor) * var(--tsds-gap-factor));

  --stack-0: 0rem;
  --stack-xxxs: calc(var(--space-xxxs) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-xxs: calc(var(--space-xxs) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-xs: calc(var(--space-xs) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-s: calc(var(--space-s) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-m: calc(var(--space-m) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-l: calc(var(--space-l) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-xl: calc(var(--space-xl) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-xxl: calc(var(--space-xxl) * var(--stack-factor) * var(--tsds-stack-factor));
  --stack-xxxl: calc(var(--space-xxxl) * var(--stack-factor) * var(--tsds-stack-factor));

  --pad-0: 0rem;
  --pad-xxxs: calc(var(--space-xxxs) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-xxs: calc(var(--space-xxs) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-xs: calc(var(--space-xs) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-s: calc(var(--space-s) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-m: calc(var(--space-m) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-l: calc(var(--space-l) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-xl: calc(var(--space-xl) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-xxl: calc(var(--space-xxl) * var(--pad-factor) * var(--tsds-pad-factor));
  --pad-xxxl: calc(var(--space-xxxl) * var(--pad-factor) * var(--tsds-pad-factor));

  --flow-0: 0rem;
  --flow-xxxs-base: 0.125rem;
  --flow-xxs-base: 0.25rem;
  --flow-xs-base: 0.5rem;
  --flow-s-base: 0.75rem;
  --flow-m-base: 1rem;
  --flow-l-base: 1.25rem;
  --flow-xl-base: 1.5rem;
  --flow-xxl-base: 2rem;
  --flow-xxxl-base: 2.5rem;
  --flow-xxxs: calc(var(--flow-xxxs-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-xxs: calc(var(--flow-xxs-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-xs: calc(var(--flow-xs-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-s: calc(var(--flow-s-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-m: calc(var(--flow-m-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-l: calc(var(--flow-l-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-xl: calc(var(--flow-xl-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-xxl: calc(var(--flow-xxl-base) * var(--flow-factor) * var(--tsds-flow-factor));
  --flow-xxxl: calc(var(--flow-xxxl-base) * var(--flow-factor) * var(--tsds-flow-factor));

  --ui-gap-0: 0rem;
  --ui-gap-xxxs-base: 0.25rem;
  --ui-gap-xxs-base: 0.35rem;
  --ui-gap-xs-base: 0.45rem;
  --ui-gap-s-base: 0.55rem;
  --ui-gap-m-base: 0.7rem;
  --ui-gap-l-base: 0.85rem;
  --ui-gap-xl-base: 1rem;
  --ui-gap-xxl-base: 1.25rem;
  --ui-gap-xxxl-base: 1.5rem;
  --ui-gap-xxxs: calc(var(--ui-gap-xxxs-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-xxs: calc(var(--ui-gap-xxs-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-xs: calc(var(--ui-gap-xs-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-s: calc(var(--ui-gap-s-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-m: calc(var(--ui-gap-m-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-l: calc(var(--ui-gap-l-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-xl: calc(var(--ui-gap-xl-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-xxl: calc(var(--ui-gap-xxl-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));
  --ui-gap-xxxl: calc(var(--ui-gap-xxxl-base) * var(--ui-gap-factor) * var(--tsds-ig-factor));

  /* Button component tokens preserve the published Fluent values. */
  --btn-py-xxs: 0.35rem;
  --btn-py-xs: 0.5rem;
  --btn-py-s: 0.65rem;
  --btn-py-m: 0.8rem;
  --btn-py-l: 1rem;
  --btn-py-xl: 1.2rem;
  --btn-py-xxl: 1.4rem;
  --btn-px-xxs: 1rem;
  --btn-px-xs: 1.15rem;
  --btn-px-s: 1.8rem;
  --btn-px-m: 2rem;
  --btn-px-l: 2.35rem;
  --btn-px-xl: 2.7rem;
  --btn-px-xxl: 3.05rem;
  --btn-ig-xxs: var(--ui-gap-xxs);
  --btn-ig-xs: var(--ui-gap-xs);
  --btn-ig-s: var(--ui-gap-s);
  --btn-ig-m: var(--ui-gap-m);
  --btn-ig-l: var(--ui-gap-l);
  --btn-ig-xl: var(--ui-gap-xl);
  --btn-ig-xxl: var(--ui-gap-xxl);
  /* Radius has its own fixed scale and is intentionally independent of space-*. */
  --ts-radius-base: 16px;
  --radius-0: 0;
  --radius-xxs: calc(var(--ts-radius-base) * 0.25);
  --radius-xs: calc(var(--ts-radius-base) * 0.5);
  --radius-s: calc(var(--ts-radius-base) * 0.75);
  --radius-m: var(--ts-radius-base);
  --radius-l: calc(var(--ts-radius-base) * 1.5);
  --radius-xl: calc(var(--ts-radius-base) * 2);
  --radius-xxl: calc(var(--ts-radius-base) * 3);

  --ts-radius-standard: var(--radius-l);
  --ts-button-radius: var(--radius-m);
  --btn-radius: var(--ts-button-radius, var(--radius-m));
  --btn-border-width: 1px;
  --btn-transition-duration: 180ms;
  --btn-transition-easing: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Neutral Surfaces darken against black; Brand Soft keeps its light base. */
  --tsds-surface-neutral-contrast: #000;
  --surface-brand-soft-mix: 12%;
  --tsds-surface-brand-soft-base: #fff;
  --outline-width: 1px;

  /* FX geometry keeps the published Fluent values and stays settings-ready. */
  --shadow-s: 0 6px 16px;
  --shadow-m: 0 12px 30px;
  --shadow-l: 0 18px 50px;
  --shadow-alpha-s: 0.1;
  --shadow-alpha-m: 0.12;
  --shadow-alpha-l: 0.14;
  --tsds-elevation-intensity: 1;
  --tsds-elevation-alpha-s: var(--shadow-alpha-s);
  --tsds-elevation-alpha-m: var(--shadow-alpha-m);
  --tsds-elevation-alpha-l: var(--shadow-alpha-l);
  --glow-s: 0 0 16px;
  --glow-m: 0 0 30px;
  --glow-l: 0 0 50px;
  --shadow-color-1: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --shadow-color-2: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-fx-color: var(--shadow-color-1);
  --sh-tint: 28%;
  --gl-tint: 42%;
  --tsds-glow-intensity: 1;
  --tsds-glow-tint: var(--gl-tint);
  --hgl-tint: 52%;
  --lift-s: translateY(-2px);
  --lift-m: translateY(-8px);
  --hover-speed: 180ms;
  --hover-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 1330px) {
  :root {
    --gap-factor: 1.35;
    --stack-factor: 0.85;
    --pad-factor: 0.9;
  }
}

@media (max-width: 1024px) {
  :root {
    --gap-factor: 1.2;
    --stack-factor: 0.85;
    --pad-factor: 0.8;
  }
}

@media (max-width: 767px) {
  :root {
    --gap-factor: 1.05;
    --stack-factor: 0.75;
    --pad-factor: 0.7;
    --flow-factor: 0.95;
    --ui-gap-factor: 0.95;
  }
}