/*
 * Design App token bridge.
 *
 * This layer lets the Design App keep its existing page and component CSS while
 * resolving design decisions through current OBO token names. AI experiments can
 * still edit this app quickly, but approved values should map back to the token
 * names below before product repos change.
 */
:root {
  --brand-25: var(--colors-brand-25);
  --brand-50: var(--colors-brand-50);
  --brand-100: var(--colors-brand-100);
  --brand-200: var(--colors-brand-200);
  --brand-300: var(--colors-brand-300);
  --brand-400: var(--colors-brand-400);
  --brand-500: var(--colors-brand-500);
  --brand-600: var(--colors-brand-600);
  --brand-700: var(--colors-brand-700);
  --brand-800: var(--colors-brand-800);
  --brand-900: var(--colors-brand-900);
  --brand-hover: var(--colors-brand-hover);
  --brand-active: var(--colors-brand-active);

  --navy-25: var(--colors-navy-25);
  --navy-50: var(--colors-navy-50);
  --navy-100: var(--colors-navy-100);
  --navy-300: var(--colors-navy-300);
  --navy-400: var(--colors-navy-400);
  --navy-500: var(--colors-navy-500);
  --navy-600: var(--colors-navy-600);
  --navy-700: var(--colors-navy-700);
  --navy-800: var(--colors-navy-800);
  --navy-900: var(--colors-navy-900);
  --navy-950: var(--colors-navy-950);

  --grey-25: var(--colors-marketing-grey-25);
  --grey-50: var(--colors-marketing-grey-50);
  --grey-100: var(--colors-marketing-grey-100);
  --grey-200: var(--colors-marketing-grey-200);
  --grey-300: var(--colors-marketing-grey-300);
  --grey-400: var(--colors-marketing-grey-400);
  --grey-500: var(--colors-marketing-grey-500);

  --white: var(--colors-base-white);
  --paper: var(--colors-marketing-paper);
  --hairline: var(--colors-marketing-grey-500);

  --text-heading: var(--colors-text-heading-marketing);
  --text-subhead: var(--colors-text-subhead-marketing);
  --text-body: var(--colors-text-body-marketing);
  --text-strong: var(--colors-text-strong-marketing);
  --text-muted: var(--colors-text-muted-marketing);
  --text-faint: var(--colors-text-faint-marketing);
  --text-link: var(--colors-text-heading-marketing);
  --text-inverse: var(--colors-foreground-fg-white);
  --text-inverse-muted: var(--colors-text-inverse-muted-marketing);

  --turquoise: var(--colors-turquoise-500);
  --turquoise-ink: var(--colors-turquoise-ink);
  --turquoise-text: var(--colors-turquoise-text);
  --turquoise-hover: var(--colors-turquoise-hover);
  --turquoise-active: var(--colors-turquoise-active);
  --success: var(--colors-success-500);
  --success-300: var(--colors-success-300);
  --turquoise-dark: var(--colors-success-500);
  --error: var(--colors-error-500);
  --yellow: var(--colors-warning-500);
  --warning-300: var(--colors-warning-300);
  --warning-400: var(--colors-warning-400);
  --warning-600: var(--colors-warning-600);
  --soft-aqua: var(--colors-soft-aqua);
  --pale-blue: var(--colors-pale-blue);
  --focus-ring: color-mix(in srgb, var(--colors-turquoise-500) 45%, transparent);
  --accent-orange: var(--colors-accent-orange);
  --accent-teal: var(--colors-accent-teal);
  --tint-orange: var(--colors-tint-orange);
  --tint-orange-border: var(--colors-tint-orange-border);
  --tint-orange-text: var(--colors-tint-orange-text);
  --tint-blue: var(--colors-tint-blue);
  --tint-blue-border: var(--colors-tint-blue-border);
  --tint-blue-text: var(--colors-tint-blue-text);
  --tint-aqua: var(--colors-tint-aqua);
  --tint-aqua-border: var(--colors-tint-aqua-border);
  --tint-aqua-text: var(--colors-tint-aqua-text);
  --tint-yellow: var(--colors-tint-yellow);
  --tint-yellow-border: var(--colors-tint-yellow-border);
  --tint-yellow-text: var(--colors-tint-yellow-text);
  --tint-lavender: var(--colors-tint-lavender);
  --tint-lavender-border: var(--colors-tint-lavender-border);
  --tint-lavender-text: var(--colors-tint-lavender-text);
  --tint-pink: var(--colors-tint-pink);
  --tint-pink-border: var(--colors-tint-pink-border);
  --tint-pink-text: var(--colors-tint-pink-text);
  --tint-mint: var(--colors-tint-mint);
  --tint-mint-border: var(--colors-tint-mint-border);
  --tint-mint-text: var(--colors-tint-mint-text);
  --tint-grey: var(--colors-tint-grey);
  --tint-grey-border: var(--colors-tint-grey-border);
  --tint-grey-text: var(--colors-tint-grey-text);
  --tint-red: var(--colors-tint-red);
  --tint-red-border: var(--colors-tint-red-border);
  --tint-red-text: var(--colors-tint-red-text);

  --space-1: var(--spacing-1);
  --space-2: var(--spacing-2);
  --space-3: var(--spacing-3);
  --space-4: var(--spacing-4);
  --space-5: var(--spacing-5);
  --space-6: var(--spacing-6);
  --space-8: var(--spacing-8);
  --space-10: var(--spacing-10);
  --space-12: var(--spacing-12);
  --space-16: var(--spacing-16);
  --space-20: var(--spacing-20);
  --space-24: var(--spacing-24);

  /* Type, line-height and shadow values come from the palette; only the
     website's names live here. Radii use the palette's --radius-* names
     directly, so the bridge defines none (obo-portals#655). */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-md: var(--font-size-lg);
  --text-lg: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);
  --text-3xl: var(--font-size-3xl);
  --leading-tight: var(--line-height-tight);
  --leading-snug: var(--line-height-snug);
  --leading-relaxed: var(--line-height-relaxed);

  --shadow-sm: var(--shadow-marketing-sm);
  --shadow-md: var(--shadow-marketing-md);
  --shadow-lg: var(--shadow-marketing-lg);
  --shadow-menu: var(--shadow-marketing-menu);

  --t3-red: var(--colors-tertiary-red);
  --t3-orange: var(--colors-tertiary-orange);
  --t3-yellow: var(--colors-tertiary-yellow);
  --t3-turquoise: var(--colors-tertiary-turquoise);
  --t3-teal: var(--colors-tertiary-teal);
  --t3-lightblue: var(--colors-tertiary-lightblue);
  --t3-purple: var(--colors-tertiary-purple);
  --t3-blue: var(--colors-tertiary-blue);
  --t3-pink: var(--colors-tertiary-pink);
}