/* Token variables. @font-face is not declared here: the font files ship in the visual companion
   package (showcase/assets/fonts); the recipe and binding shape are in assets/type-recipe.json. */
/* SANKORD design system: tokens, light theme (default). Primitives are literals; every semantic token aliases exactly one primitive. */
:root {
  --ds-color-petrol-50: #EEF9FC;
  --ds-color-petrol-100: #DCEFF5;
  --ds-color-petrol-200: #BCDEE8;
  --ds-color-petrol-300: #96C7D4;
  --ds-color-petrol-400: #6EADBD;
  --ds-color-petrol-500: #4B92A3;
  --ds-color-petrol-600: #2B7789;
  --ds-color-petrol-700: #135E6E;
  --ds-color-petrol-800: #044855;
  --ds-color-petrol-900: #02343E;
  --ds-color-petrol-950: #02232A;
  --ds-color-neutral-0: #FFFFFF;
  --ds-color-neutral-25: #F8FBFB;
  --ds-color-neutral-50: #F2F6F7;
  --ds-color-neutral-100: #E8EEF0;
  --ds-color-neutral-200: #D9E1E3;
  --ds-color-neutral-300: #C3CCCF;
  --ds-color-neutral-400: #9CA7AA;
  --ds-color-neutral-500: #778286;
  --ds-color-neutral-600: #5A6669;
  --ds-color-neutral-700: #414D50;
  --ds-color-neutral-800: #2A3538;
  --ds-color-neutral-850: #1E292B;
  --ds-color-neutral-900: #141E20;
  --ds-color-neutral-950: #0B1315;
  --ds-color-neutral-1000: #050B0D;
  --ds-color-success-fg: #2B7132;
  --ds-color-success-bg: #E2F7E2;
  --ds-color-success-fg-dark: #90D192;
  --ds-color-success-bg-dark: #1A2C1A;
  --ds-color-warning-fg: #976202;
  --ds-color-warning-bg: #FFF2D9;
  --ds-color-warning-fg-dark: #F0BE67;
  --ds-color-warning-bg-dark: #342611;
  --ds-color-error-fg: #B32F28;
  --ds-color-error-bg: #FFEBE9;
  --ds-color-error-fg-dark: #F98F87;
  --ds-color-error-bg-dark: #3E1E1C;
  --ds-color-data-1: #135E6E;
  --ds-color-data-1-dark: #96C7D4;
  --ds-color-data-2: #C79D59;
  --ds-color-data-2-dark: #E6BD77;
  --ds-color-data-3: #5471A6;
  --ds-color-data-3-dark: #89A5D7;
  --ds-color-data-4: #6C9455;
  --ds-color-data-4-dark: #9CC685;
  --ds-color-data-5: #B8674E;
  --ds-color-data-5-dark: #E2947C;
  --ds-color-data-6: #778286;
  --ds-color-data-6-dark: #9CA7AA;
  --ds-color-shadow: rgba(11, 19, 21, 0.12);
  --ds-color-shadow-strong: rgba(11, 19, 21, 0.22);
  --ds-color-scrim: rgba(11, 19, 21, 0.56);
  --ds-color-shadow-dark: rgba(0, 0, 0, 0.45);
  --ds-color-scrim-dark: rgba(0, 0, 0, 0.66);
  --ds-spacing-3xs: 2px;
  --ds-spacing-2xs: 3px;
  --ds-spacing-xs: 5px;
  --ds-spacing-sm: 8px;
  --ds-spacing-md: 13px;
  --ds-spacing-lg: 21px;
  --ds-spacing-xl: 34px;
  --ds-spacing-2xl: 55px;
  --ds-spacing-3xl: 89px;
  --ds-radius-none: 0px;
  --ds-radius-xs: 2px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 13px;
  --ds-radius-full: 9999px;
  --ds-font-family-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Hebrew", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ds-font-size-xs: 13px;
  --ds-font-size-sm: 16px;
  --ds-font-size-md: 20px;
  --ds-font-size-lg: 26px;
  --ds-font-size-xl: 33px;
  --ds-font-size-2xl: 42px;
  --ds-font-size-3xl: 54px;
  --ds-font-size-2xs: 12px;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-leading-text: 1.618;
  --ds-font-leading-heading: 1.236;
  --ds-font-leading-tight: 1.2;
  --ds-font-tracking-tight: -0.01em;
  --ds-border-width-hairline: 1px;
  --ds-border-width-focus: 2px;
  --ds-border-width-decision: 3px;
  --ds-border-width-icon: 2px;
  --ds-motion-duration-instant: 100ms;
  --ds-motion-duration-fast: 160ms;
  --ds-motion-duration-base: 240ms;
  --ds-motion-duration-slow: 360ms;
  --ds-motion-duration-slower: 500ms;
  --ds-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ds-breakpoint-sm: 480px;
  --ds-breakpoint-md: 768px;
  --ds-breakpoint-lg: 1024px;
  --ds-breakpoint-xl: 1280px;
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-measure-text: 66ch;
  --ds-space-safe-ios-top: 47px;
  --ds-space-safe-ios-bottom: 34px;
  --ds-space-safe-android-top: 24px;
  --ds-space-safe-android-bottom: 16px;
  --ds-size-tabbar-ios: 49px;
  --ds-size-tabbar-android: 56px;
  --ds-size-appbar-ios: 44px;
  --ds-size-appbar-android: 56px;
  --ds-size-fab: 56px;
  --ds-size-avatar-xs: 24px;
  --ds-size-avatar-sm: 32px;
  --ds-size-avatar-md: 40px;
  --ds-size-avatar-lg: 48px;
  --ds-size-avatar-xl: 64px;
  --ds-size-modal-sm: 400px;
  --ds-size-modal-md: 560px;
  --ds-size-modal-lg: 760px;
  --ds-size-control-touch: 44px;
  --ds-size-toggle-track-w: 40px;
  --ds-size-toggle-track-h: 22px;
  --ds-size-check: 20px;
  --ds-size-container-page: 560px;
  --ds-size-container-md: 760px;
  --ds-size-container-lg: 1080px;
  --ds-size-container-xl: 1240px;
  --ds-bg-page: var(--ds-color-neutral-50);
  --ds-bg-surface: var(--ds-color-neutral-0);
  --ds-bg-elevated: var(--ds-color-neutral-0);
  --ds-bg-muted: var(--ds-color-neutral-25);
  --ds-bg-inverse: var(--ds-color-neutral-900);
  --ds-bg-brand: var(--ds-color-petrol-950);
  --ds-bg-scrim: var(--ds-color-scrim);
  --ds-text-primary: var(--ds-color-neutral-900);
  --ds-text-secondary: var(--ds-color-neutral-600);
  --ds-text-disabled: var(--ds-color-neutral-500);
  --ds-text-inverse: var(--ds-color-neutral-0);
  --ds-text-brand: var(--ds-color-petrol-700);
  --ds-text-on-brand: var(--ds-color-neutral-25);
  --ds-text-error: var(--ds-color-error-fg);
  --ds-border-subtle: var(--ds-color-neutral-100);
  --ds-border-default: var(--ds-color-neutral-200);
  --ds-border-strong: var(--ds-color-neutral-500);
  --ds-border-error: var(--ds-color-error-fg);
  --ds-border-focus: var(--ds-color-petrol-500);
  --ds-icon-primary: var(--ds-color-neutral-900);
  --ds-icon-secondary: var(--ds-color-neutral-600);
  --ds-icon-disabled: var(--ds-color-neutral-500);
  --ds-action-primary-default: var(--ds-color-petrol-700);
  --ds-action-primary-hover: var(--ds-color-petrol-800);
  --ds-action-primary-active: var(--ds-color-petrol-900);
  --ds-action-primary-disabled: var(--ds-color-neutral-200);
  --ds-action-primary-text: var(--ds-color-neutral-0);
  --ds-action-secondary-default: var(--ds-color-neutral-0);
  --ds-action-secondary-hover: var(--ds-color-neutral-50);
  --ds-action-secondary-active: var(--ds-color-neutral-100);
  --ds-action-secondary-disabled: var(--ds-color-neutral-25);
  --ds-action-secondary-text: var(--ds-color-neutral-900);
  --ds-action-secondary-border: var(--ds-color-neutral-500);
  --ds-action-destructive-default: var(--ds-color-error-fg);
  --ds-action-destructive-hover: var(--ds-color-error-fg);
  --ds-action-destructive-active: var(--ds-color-error-fg);
  --ds-action-destructive-disabled: var(--ds-color-neutral-200);
  --ds-action-destructive-text: var(--ds-color-neutral-0);
  --ds-decision-surface: var(--ds-color-petrol-50);
  --ds-decision-line: var(--ds-color-petrol-700);
  --ds-bg-status-success: var(--ds-color-success-bg);
  --ds-text-status-success: var(--ds-color-success-fg);
  --ds-border-status-success: var(--ds-color-success-fg);
  --ds-icon-status-success: var(--ds-color-success-fg);
  --ds-bg-status-warning: var(--ds-color-warning-bg);
  --ds-text-status-warning: var(--ds-color-warning-fg);
  --ds-border-status-warning: var(--ds-color-warning-fg);
  --ds-icon-status-warning: var(--ds-color-warning-fg);
  --ds-bg-status-error: var(--ds-color-error-bg);
  --ds-text-status-error: var(--ds-color-error-fg);
  --ds-border-status-error: var(--ds-color-error-fg);
  --ds-icon-status-error: var(--ds-color-error-fg);
  --ds-bg-status-decision: var(--ds-color-petrol-700);
  --ds-text-status-decision: var(--ds-color-neutral-0);
  --ds-border-status-decision: var(--ds-color-petrol-700);
  --ds-icon-status-decision: var(--ds-color-neutral-0);
  --ds-bg-status-neutral: var(--ds-color-neutral-25);
  --ds-text-status-neutral: var(--ds-color-neutral-600);
  --ds-border-status-neutral: var(--ds-color-neutral-200);
  --ds-icon-status-neutral: var(--ds-color-neutral-600);
  --ds-data-1: var(--ds-color-data-1);
  --ds-data-2: var(--ds-color-data-2);
  --ds-data-3: var(--ds-color-data-3);
  --ds-data-4: var(--ds-color-data-4);
  --ds-data-5: var(--ds-color-data-5);
  --ds-data-6: var(--ds-color-data-6);
  --ds-logo-ink: var(--ds-color-neutral-900);
  --ds-logo-bar: var(--ds-color-petrol-700);
  --ds-logo-ink-on-brand: var(--ds-color-neutral-25);
  --ds-logo-bar-on-brand: var(--ds-color-petrol-300);
  --ds-space-component-sm: var(--ds-spacing-xs);
  --ds-space-component-md: var(--ds-spacing-sm);
  --ds-space-component-lg: var(--ds-spacing-md);
  --ds-space-section-sm: var(--ds-spacing-lg);
  --ds-space-section-md: var(--ds-spacing-xl);
  --ds-space-section-lg: var(--ds-spacing-2xl);
  --ds-space-page-sm: var(--ds-spacing-md);
  --ds-space-page-md: var(--ds-spacing-lg);
  --ds-space-page-lg: var(--ds-spacing-xl);
  --ds-radius-control: var(--ds-radius-none);
  --ds-radius-card: var(--ds-radius-none);
  --ds-radius-modal: var(--ds-radius-none);
  --ds-radius-pill: var(--ds-radius-none);
  --ds-radius-app-icon: var(--ds-radius-lg);
  --ds-motion-micro: var(--ds-motion-duration-instant);
  --ds-motion-quick: var(--ds-motion-duration-fast);
  --ds-motion-moderate: var(--ds-motion-duration-base);
  --ds-motion-deliberate: var(--ds-motion-duration-slow);
  --ds-type-label-sm-size: var(--ds-font-size-2xs);
  --ds-type-body-size: var(--ds-font-size-sm);
  --ds-type-body-leading: var(--ds-font-leading-text);
  --ds-type-caption-size: var(--ds-font-size-xs);
  --ds-type-subtitle-size: var(--ds-font-size-md);
  --ds-type-heading-3-size: var(--ds-font-size-lg);
  --ds-type-heading-2-size: var(--ds-font-size-xl);
  --ds-type-heading-1-size: var(--ds-font-size-2xl);
  --ds-type-display-size: var(--ds-font-size-3xl);
  --ds-type-heading-leading: var(--ds-font-leading-heading);
  --ds-type-heading-weight: var(--ds-font-weight-semibold);
  --ds-type-ui-weight: var(--ds-font-weight-medium);
  --ds-type-body-weight: var(--ds-font-weight-regular);
  --ds-control-height-sm: var(--ds-size-control-sm);
  --ds-control-height-md: var(--ds-size-control-md);
  --ds-control-height-lg: var(--ds-size-control-lg);
  --ds-control-padding-sm: var(--ds-spacing-sm);
  --ds-control-padding-md: var(--ds-spacing-md);
  --ds-control-padding-lg: var(--ds-spacing-lg);
  --ds-control-touch-target: var(--ds-size-control-touch);
  --ds-control-check-size: var(--ds-size-check);
  --ds-control-toggle-width: var(--ds-size-toggle-track-w);
  --ds-control-toggle-height: var(--ds-size-toggle-track-h);
  --ds-control-checked: var(--ds-color-neutral-900);
  --ds-control-checked-mark: var(--ds-color-neutral-0);
  --ds-control-track-off: var(--ds-color-neutral-300);
  --ds-text-link: var(--ds-color-petrol-700);
  --ds-text-link-visited: var(--ds-color-petrol-900);
  --ds-bg-selected: var(--ds-color-neutral-100);
  --ds-bg-hover: var(--ds-color-neutral-50);
  --ds-avatar-size-xs: var(--ds-size-avatar-xs);
  --ds-avatar-size-sm: var(--ds-size-avatar-sm);
  --ds-avatar-size-md: var(--ds-size-avatar-md);
  --ds-avatar-size-lg: var(--ds-size-avatar-lg);
  --ds-avatar-size-xl: var(--ds-size-avatar-xl);
  --ds-modal-width-sm: var(--ds-size-modal-sm);
  --ds-modal-width-md: var(--ds-size-modal-md);
  --ds-modal-width-lg: var(--ds-size-modal-lg);
  --ds-icon-size-sm: var(--ds-size-icon-sm);
  --ds-icon-size-md: var(--ds-size-icon-md);
  --ds-icon-size-lg: var(--ds-size-icon-lg);
  --ds-space-safe-top: var(--ds-space-safe-ios-top);
  --ds-space-safe-bottom: var(--ds-space-safe-ios-bottom);
  --ds-mobile-tabbar-height: var(--ds-size-tabbar-ios);
  --ds-mobile-appbar-height: var(--ds-size-appbar-ios);
  --ds-mobile-fab-size: var(--ds-size-fab);
  --ds-grid-breakpoint-sm: var(--ds-breakpoint-sm);
  --ds-grid-breakpoint-md: var(--ds-breakpoint-md);
  --ds-grid-breakpoint-lg: var(--ds-breakpoint-lg);
  --ds-grid-breakpoint-xl: var(--ds-breakpoint-xl);
  --ds-space-container-page: var(--ds-size-container-page);
  --ds-space-container-md: var(--ds-size-container-md);
  --ds-space-container-lg: var(--ds-size-container-lg);
  --ds-space-container-xl: var(--ds-size-container-xl);
  --ds-space-page-inset-sm: var(--ds-spacing-md);
  --ds-space-page-inset-md: var(--ds-spacing-lg);
  --ds-space-page-inset-lg: var(--ds-spacing-xl);
  --ds-grid-gutter-sm: var(--ds-spacing-md);
  --ds-grid-gutter-md: var(--ds-spacing-lg);
  --ds-grid-gutter-lg: var(--ds-spacing-lg);
  --ds-density-control-height: var(--ds-size-control-md);
  --ds-density-gap: var(--ds-spacing-sm);
  --ds-density-row: var(--ds-spacing-md);
  --ds-grid-columns-sm: 4;
  --ds-grid-columns-md: 8;
  --ds-grid-columns-lg: 12;
  --ds-effect-elevation-1: 0 1px 2px var(--ds-color-shadow);
  --ds-effect-elevation-2: 0 4px 13px var(--ds-color-shadow);
  --ds-effect-elevation-3: 0 13px 34px var(--ds-color-shadow-strong);
  --ds-effect-focus: 0 0 0 2px var(--ds-bg-surface), 0 0 0 4px var(--ds-border-focus);
}
[data-density="compact"] {
  --ds-density-control-height: var(--ds-size-control-sm);
  --ds-density-gap: var(--ds-spacing-xs);
  --ds-density-row: var(--ds-spacing-sm);
}
[data-platform="android"] {
  --ds-space-safe-top: var(--ds-space-safe-android-top);
  --ds-space-safe-bottom: var(--ds-space-safe-android-bottom);
  --ds-mobile-tabbar-height: var(--ds-size-tabbar-android);
  --ds-mobile-appbar-height: var(--ds-size-appbar-android);
}