/* ===========================================================================
   ATBIO UI Framework / Theme Tokens
   Single source of truth for reusable visual decisions.
   =========================================================================== */

:root {
  /* Brand: restrained medical teal with bright, breathable surfaces. */
  --ui-color-brand-50: #f0faf9;
  --ui-color-brand-100: #dcf4f1;
  --ui-color-brand-200: #b8e7e2;
  --ui-color-brand-300: #85d7d0;
  --ui-color-brand-500: #2d9f98;
  --ui-color-brand-600: #237d78;
  --ui-color-brand-700: #185d5a;

  /* Semantic aliases are the only color names components should consume. */
  --ui-color-primary: var(--ui-color-brand-600);
  --ui-color-primary-hover: var(--ui-color-brand-700);
  --ui-color-primary-active: var(--ui-color-brand-700);
  --ui-color-secondary: var(--ui-color-ink-900);
  --ui-color-accent: var(--ui-color-brand-500);

  --ui-color-ink-900: #132b3a;
  --ui-color-ink-700: #3d5260;
  --ui-color-ink-500: #697b86;
  --ui-color-ink-300: #aab7be;
  --ui-color-line-100: #e8eef0;
  --ui-color-line-200: #d5e0e4;
  --ui-color-surface-0: #ffffff;
  --ui-color-surface-50: #f8fbfc;
  --ui-color-surface-100: #f1f7f8;
  --ui-color-overlay: rgba(19, 43, 58, 0.08);
  --ui-color-overlay-scrim: rgba(19, 43, 58, 0.56);
  --ui-color-shadow: rgba(19, 43, 58, 0.12);
  --ui-color-success: #1f8a61;
  --ui-color-warning: #aa7117;
  --ui-color-danger: #c74747;
  --ui-color-info: #2878ad;
  --ui-color-text-primary: var(--ui-color-ink-900);
  --ui-color-text-secondary: var(--ui-color-ink-700);
  --ui-color-text-muted: var(--ui-color-ink-500);
  --ui-color-text-inverse: var(--ui-color-surface-0);
  --ui-color-background: var(--ui-color-surface-50);
  --ui-color-surface: var(--ui-color-surface-0);
  --ui-color-border-subtle: var(--ui-color-line-100);
  --ui-color-border-default: var(--ui-color-line-200);
  --ui-color-border-strong: var(--ui-color-ink-300);
  --ui-color-focus: var(--ui-color-brand-500);

  --ui-font-family-latin: "Jost", "Helvetica Neue", Helvetica, sans-serif;
  --ui-font-family-cjk: "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --ui-font-family-ar: "Noto Sans Arabic", "Traditional Arabic", sans-serif;
  --ui-font-sans: var(--ui-font-family-latin), var(--ui-font-family-cjk);
  --ui-font-sans-ar: var(--ui-font-family-ar);
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-font-size-h1: clamp(2.5rem, 4vw, 4.5rem);
  --ui-font-size-h2: clamp(2rem, 3vw, 3.25rem);
  --ui-font-size-h3: clamp(1.625rem, 2vw, 2.25rem);
  --ui-font-size-h4: 1.5rem;
  --ui-font-size-h5: 1.25rem;
  --ui-font-size-h6: 1rem;
  --ui-font-size-body: 1rem;
  --ui-font-size-small: 0.875rem;
  --ui-font-size-caption: 0.75rem;
  --ui-font-size-nav: 0.8125rem;
  --ui-font-size-button: 0.875rem;
  --ui-font-size-xs: var(--ui-font-size-caption);
  --ui-font-size-sm: var(--ui-font-size-small);
  --ui-font-size-md: var(--ui-font-size-body);
  --ui-font-size-lg: 1.125rem;
  --ui-font-size-xl: 1.5rem;
  --ui-font-size-2xl: 2rem;
  --ui-letter-spacing-display: -0.025em;
  --ui-letter-spacing-body: normal;
  --ui-letter-spacing-nav: 0.08em;
  --ui-letter-spacing-eyebrow: 0.12em;
  --ui-line-height-tight: 1.14;
  --ui-line-height-base: 1.6;
  --ui-line-height-relaxed: 1.75;
  --ui-line-height-heading: var(--ui-line-height-tight);

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-space-20: 80px;
  --ui-space-xs: var(--ui-space-2);
  --ui-space-sm: var(--ui-space-4);
  --ui-space-md: var(--ui-space-6);
  --ui-space-lg: var(--ui-space-8);
  --ui-space-xl: var(--ui-space-12);

  --ui-radius-xs: 0.375rem;
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.75rem;
  --ui-radius-lg: 1rem;
  --ui-radius-xl: 1.5rem;
  --ui-radius-pill: 999px;

  --ui-shadow-xs: 0 2px 10px rgba(19, 43, 58, 0.06);
  --ui-shadow-sm: 0 8px 24px rgba(19, 43, 58, 0.08);
  --ui-shadow-md: 0 16px 40px rgba(19, 43, 58, 0.12);
  --ui-shadow-lg: 0 24px 64px rgba(19, 43, 58, 0.16);
  --ui-shadow-card: var(--ui-shadow-xs);
  --ui-shadow-floating: var(--ui-shadow-md);

  --ui-border-width: 1px;
  --ui-border-default: var(--ui-border-width) solid var(--ui-color-border-default);
  --ui-border-subtle: var(--ui-border-width) solid var(--ui-color-border-subtle);
  --ui-opacity-disabled: 0.5;
  --ui-opacity-muted: 0.72;
  --ui-opacity-overlay: 0.56;

  --ui-container-max: 1200px;
  --ui-container-wide: 1440px;
  --ui-container-narrow: 960px;
  --ui-container-padding: clamp(20px, 4vw, 48px);
  --ui-grid-columns: 12;
  --ui-grid-gap: var(--ui-space-6);
  --ui-grid-gap-compact: var(--ui-space-4);
  --ui-measure-readable: 60ch;
  --ui-drawer-max-width: 28rem;
  --ui-toast-max-width: 24rem;
  --ui-icon-size-current: 1em;
  --ui-section-space-sm: var(--ui-space-16);
  --ui-section-space-md: 96px;
  --ui-section-space-lg: 128px;
  --ui-section-space-xs: var(--ui-space-10);

  --ui-duration-fast: 160ms;
  --ui-duration-normal: 220ms;
  --ui-duration-slow: 300ms;
  --ui-duration-reduced: 1ms;
  --ui-ease-standard: ease;
  --ui-ease-emphasized: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ui-focus-ring: 0 0 0 4px rgba(45, 159, 152, 0.18);
  --ui-focus-ring-width: 4px;
  --ui-focus-ring-offset: 2px;
  --ui-hover-lift-sm: -1px;
  --ui-hover-lift-md: -3px;
  --ui-control-height: 48px;
  --ui-control-height-compact: 44px;
  --ui-control-icon-size: 44px;
  --ui-spinner-size: 1em;
  --ui-control-textarea-min-height: 140px;
  --ui-status-min-height: 28px;
  --ui-touch-target-min: 44px;
  --ui-animation-fade-in: ui-fade-in var(--ui-duration-normal) var(--ui-ease-emphasized) both;
  --ui-animation-slide-up: ui-slide-up var(--ui-duration-normal) var(--ui-ease-emphasized) both;
  --ui-animation-spin: ui-spin 800ms linear infinite;

  /* CSS custom properties cannot be used in media queries; keep these as the
     documented source of truth for responsive decisions. */
  --ui-breakpoint-mobile-max: 767px;
  --ui-breakpoint-tablet-min: 768px;
  --ui-breakpoint-tablet-max: 1024px;
  --ui-breakpoint-laptop-min: 1025px;
  --ui-breakpoint-desktop-min: 1440px;

  --ui-z-base: 0;
  --ui-z-content: 1;
  --ui-z-header: 100;
  --ui-z-dropdown: 200;
  --ui-z-overlay: 300;
  --ui-z-drawer: 400;
  --ui-z-dialog: 500;
  --ui-z-toast: 600;

  --ui-header-height-desktop: 86px;
  --ui-header-height-scrolled: 66px;
  --ui-header-height-tablet: 78px;
  --ui-header-height-mobile: 74px;

  /* P05 preview aliases keep legacy page CSS on one shared visual scale. */
  --atbio-font-sans: var(--ui-font-sans);
  --atbio-color-ink: var(--ui-color-ink-900);
  --atbio-color-body: var(--ui-color-ink-700);
  --atbio-color-muted: var(--ui-color-ink-500);
  --atbio-color-border: var(--ui-color-line-200);
  --atbio-color-surface: var(--ui-color-surface-0);
  --atbio-color-surface-soft: var(--ui-color-surface-50);
  --atbio-color-primary: var(--ui-color-primary);
  --atbio-color-primary-hover: var(--ui-color-primary-hover);
  --atbio-color-accent: var(--ui-color-accent);
  --atbio-container-max: var(--ui-container-max);
  --atbio-container-gutter: var(--ui-container-padding);
  --atbio-space-1: var(--ui-space-1);
  --atbio-space-2: var(--ui-space-2);
  --atbio-space-3: var(--ui-space-3);
  --atbio-space-4: var(--ui-space-4);
  --atbio-space-5: var(--ui-space-5);
  --atbio-space-6: var(--ui-space-6);
  --atbio-radius-sm: var(--ui-radius-sm);
  --atbio-radius-md: var(--ui-radius-md);
  --atbio-radius-lg: var(--ui-radius-lg);
  --atbio-shadow-sm: var(--ui-shadow-sm);
  --atbio-shadow-md: var(--ui-shadow-md);
  --atbio-transition-fast: var(--ui-duration-fast) var(--ui-ease-standard);
  --atbio-transition-normal: var(--ui-duration-normal) var(--ui-ease-standard);
}

html:lang(ar) .ui-font-context,
body:lang(ar) .ui-font-context {
  font-family: var(--ui-font-sans-ar);
}