/* ════════════════════════════════════════════════════════════════════════
   NDS SEMANTIC TOKENS — meaning layer, copied from _sass/tokens/_semantic.scss
   background / text / border / icon / focus / controls / shadow
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Shadows ── */
    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
    --shadow-md-top: 0px -3.288px 6.575px -1.644px rgba(16, 24, 40, 0.10), 0px -1.644px 3.288px -1.644px rgba(16, 24, 40, 0.06);
    --shadow-inset: inset 0px 0 4px 2px rgba(0, 0, 0, 0.05);

    /* ── Background — page surfaces ── */
    --background-default: var(--colors-base-white);
    --background-body: var(--colors-neutral-50);
    --background-nav: var(--colors-base-white);
    --background-topbar: var(--colors-neutral-100);
    --background-footer: var(--background-primary-strong);
    --background-hero: var(--background-primary-strong);
    --background-stripe: var(--colors-neutral-50);
    --background-sub-hero: var(--background-primary-light);
    --background-menu: var(--colors-base-white);
    --background-card: var(--colors-base-white);
    --background-card-hovered: var(--colors-neutral-50);
    --background-surface-elevated: var(--colors-base-white);
    --background-surface-sunken: var(--colors-neutral-100);
    --background-surface-oncolor: var(--colors-base-white);
    --background-overlay: var(--colors-alpha-black-50);
    --background-mark: var(--colors-primary-100);
    --img-overlay-color: var(--colors-primary-950);

    /* ── Background — brand & neutral scales ── */
    --background-primary-light: var(--colors-primary-50);
    --background-primary-faint: var(--colors-primary-25);
    --background-primary-strong: var(--colors-primary-900);
    --background-neutral-light: var(--colors-neutral-100);
    --background-primary: var(--colors-primary-600);
    --background-secondary: var(--colors-secondary-600);
    --background-tertiary: var(--colors-tertiary-600);

    /* ── Background — status ── */
    --background-success: var(--colors-green-600);
    --background-success-light: var(--colors-green-50);
    --background-success-faint: var(--colors-green-25);
    --background-info: var(--colors-blue-600);
    --background-info-light: var(--colors-blue-50);
    --background-info-faint: var(--colors-blue-25);
    --background-warning: var(--colors-yellow-600);
    --background-warning-light: var(--colors-yellow-50);
    --background-warning-faint: var(--colors-yellow-25);
    --background-error: var(--colors-red-600);
    --background-error-light: var(--colors-red-50);
    --background-error-faint: var(--colors-red-25);

    /* ── Background — disabled ── */
    --background-disabled: var(--colors-neutral-200);
    --background-disabled-primary: var(--colors-primary-200);
    --background-inverse-disabled: var(--colors-neutral-100);

    /* ── Text ── */
    --text-default: var(--colors-base-black);
    --text-display: var(--colors-neutral-800);
    --text-primary-paragraph: var(--colors-neutral-700);
    --text-secondary-paragraph: var(--colors-neutral-500);
    --text-primary-strong: var(--colors-primary-700);
    /* --text-{primary,secondary,tertiary} are BRAND-COLORED text; for hierarchy
       use --text-default / --text-display / --text-*-paragraph */
    --text-primary: var(--colors-primary-600);
    --text-secondary: var(--colors-secondary-600);
    --text-tertiary: var(--colors-tertiary-500);
    --text-primary-light: var(--colors-primary-300);
    --text-secondary-light: var(--colors-secondary-300);
    --text-tertiary-light: var(--colors-tertiary-300);
    --text-oncolor-primary: var(--colors-base-white);
    --text-oncolor-secondary: var(--colors-alpha-white-80);
    --text-oncolor-tertiary: var(--colors-alpha-white-70);
    --text-success: var(--colors-green-700);
    --text-info: var(--colors-blue-700);
    --text-warning: var(--colors-yellow-700);
    --text-error: var(--colors-red-700);
    --text-default-disabled: var(--colors-neutral-400);
    --text-default-oncolor-disabled: var(--colors-alpha-white-40);

    /* ── Border ── */
    --border-oncolor: var(--colors-alpha-white-40);
    --border-primary: var(--colors-primary-600);
    --border-primary-light: var(--colors-primary-200);
    --border-secondary: var(--colors-secondary-600);
    --border-secondary-light: var(--colors-secondary-200);
    --border-tertiary: var(--colors-tertiary-500);
    --border-tertiary-light: var(--colors-tertiary-200);
    --border-neutral-primary: var(--colors-neutral-300);
    --border-neutral-secondary: var(--colors-neutral-200);
    --border-neutral-tertiary: var(--colors-neutral-100);
    --border-success: var(--colors-green-700);
    --border-success-light: var(--colors-green-200);
    --border-info: var(--colors-blue-700);
    --border-info-light: var(--colors-blue-200);
    --border-warning: var(--colors-yellow-700);
    --border-warning-light: var(--colors-yellow-200);
    --border-error: var(--colors-red-700);
    --border-error-light: var(--colors-red-200);
    --border-disabled: var(--colors-neutral-300);
    --divider-color: var(--colors-alpha-black-10);

    /* ── Focus ── */
    --focus-outline: var(--colors-base-black);
    --focus-inner: var(--colors-base-white);

    /* ── Icon ── */
    --icon-default: var(--colors-base-black);
    --icon-primary: var(--colors-primary-600);
    --icon-primary-light: var(--colors-primary-50);
    --icon-neutral: var(--colors-neutral-700);
    --icon-neutral-light: var(--colors-neutral-50);
    --icon-secondary: var(--colors-secondary-600);
    --icon-secondary-light: var(--colors-secondary-50);
    --icon-tertiary: var(--colors-tertiary-500);
    --icon-tertiary-light: var(--colors-tertiary-50);
    --icon-success: var(--colors-green-700);
    --icon-success-light: var(--colors-green-50);
    --icon-info: var(--colors-blue-700);
    --icon-info-light: var(--colors-blue-50);
    --icon-warning: var(--colors-yellow-700);
    --icon-warning-light: var(--colors-yellow-50);
    --icon-error: var(--colors-red-700);
    --icon-error-light: var(--colors-red-50);
    --icon-oncolor: var(--colors-base-white);
    --icon-separator: var(--colors-neutral-400);
    --icon-neutral-ring: var(--colors-neutral-100);
    --icon-success-ring: var(--colors-green-100);
    --icon-info-ring: var(--colors-blue-100);
    --icon-warning-ring: var(--colors-yellow-100);
    --icon-error-ring: var(--colors-red-100);
    --icon-default-disabled: var(--colors-neutral-400);
    --icon-default-oncolor-disabled: var(--colors-alpha-white-40);

    /* ── Controls (checkbox / radio / switch / slider shared) ── */
    --controls-primary-checked: var(--colors-primary-600);
    --controls-primary-hovered: var(--colors-primary-500);
    --controls-primary-pressed: var(--colors-primary-700);
    --controls-neutral-checked: var(--colors-neutral-950);
    --controls-neutral-hovered: var(--colors-neutral-600);
    --controls-neutral-pressed: var(--colors-neutral-600);
    --controls-ripple-effect: var(--colors-neutral-200);
    --controls-border: var(--colors-neutral-500);
    --controls-disabled: var(--colors-neutral-400);
    --controls-icon-disabled: var(--colors-base-white);
    --controls-text-error: var(--text-error);

    /* ── Layout / typography ── */
    --paragraph-max-width: 720px;
}