/* PeopleIndex / edition 4 / brand and digital experience tokens.
   Generated from 09-design-system/design-tokens.json.
   Update the JSON source, then run npm run sync:brand in peopleindexlander.
   Brand colours and original logo geometry are preserved.
   Legacy --pi-surface means paper; --pi-color-surface means white UI.
   Archived tokens are references; current tokens drive mounted components.
   Breakpoint and CRM tokens document existing component contracts. */
:root {
  /* brand-color */
  --pi-blue: #1473F9;
  --pi-cyan: #15CFE0;
  --pi-ink: #111827;
  --pi-white: #FFFFFF;

  /* functional-color */
  --pi-color-body: #4B5563;
  --pi-color-muted: #6B7280;
  --pi-color-paper: #F8F9FB;
  --pi-color-surface: #FFFFFF;
  --pi-color-soft: #F1F3F5;
  --pi-color-line: #E8EAED;
  --pi-color-line-strong: #DEE1E5;
  --pi-color-blue-text: #1D4ED8;
  --pi-color-blue-wash: #EFF6FF;
  --pi-color-cyan-wash: #E8F9FC;
  --pi-color-field: #F8FAFC;
  --pi-color-field-border: #DEE5EF;
  --pi-color-profile: #F7FAFE;
  --pi-color-team-film: #F1F5FA;
  --pi-color-workflow-ground: linear-gradient(150deg,#F0F6FE 0%,#F7FAFD 48%,#EDFAFC 100%);
  --pi-color-agenda-ground: color-mix(in srgb,var(--pi-cyan) 8%,#fff);

  /* semantic-color */
  --pi-semantic-warning: #B45309;
  --pi-semantic-warning-wash: #FFFBEB;
  --pi-semantic-error: #DC2626;
  --pi-semantic-success: #15803D;
  --pi-semantic-success-wash: #F0FDF4;

  /* typography */
  --pi-font-editorial: Manrope, Inter, sans-serif;
  --pi-font-product: Inter, system-ui, -apple-system, sans-serif;
  --pi-font-fallback: Arial, sans-serif;
  --pi-type-display-size: clamp(68px,7.5vw,112px);
  --pi-type-display-weight: 550;
  --pi-type-display-leading: 1.025;
  --pi-type-display-tracking: -5.8px;
  --pi-type-story-size: clamp(48px,5.1vw,72px);
  --pi-type-story-weight: 550;
  --pi-type-story-leading: 1.055;
  --pi-type-story-tracking: -3.5px;
  --pi-type-section-copy-size: 15px;
  --pi-type-section-copy-leading: 1.8;
  --pi-type-product-name-size: 16px;
  --pi-type-product-meta-size: 12px;
  --pi-type-product-summary-size: 14px;
  --pi-type-input-size: 14px;
  --pi-type-input-mobile-size: 16px;

  /* spacing */
  --pi-space-4: 4px;
  --pi-space-8: 8px;
  --pi-space-12: 12px;
  --pi-space-16: 16px;
  --pi-space-20: 20px;
  --pi-space-24: 24px;
  --pi-space-32: 32px;
  --pi-space-40: 40px;
  --pi-space-48: 48px;
  --pi-space-56: 56px;
  --pi-space-64: 64px;
  --pi-space-72: 72px;
  --pi-space-80: 80px;
  --pi-space-96: 96px;
  --pi-space-112: 112px;

  /* layout */
  --pi-layout-max: 1320px;
  --pi-layout-max-pricing: 1240px;
  --pi-layout-max-agenda: 1160px;
  --pi-layout-max-reading: 1120px;
  --pi-layout-gutter-desktop: 56px;
  --pi-layout-gutter-medium: 40px;
  --pi-layout-gutter-tablet: 32px;
  --pi-layout-gutter-mobile: 20px;
  --pi-layout-section-space: clamp(76px,7.5vw,112px);
  --pi-layout-section-space-mobile: 60px;
  --pi-layout-header-height: 78px;
  --pi-layout-header-height-tablet: 72px;
  --pi-layout-header-height-mobile: 66px;
  --pi-layout-scroll-offset: 96px;

  /* shape */
  --pi-radius-control: 5px;
  --pi-radius-field: 4px;
  --pi-radius-product-card: 12px;
  --pi-radius-product-stage: 12px;
  --pi-radius-workflow: 14px;
  --pi-radius-workflow-mobile: 10px;
  --pi-radius-student-app: 8px;
  --pi-radius-agenda: 3px;
  --pi-radius-pricing: 4px;
  --pi-radius-studio-corner: 24px;
  --pi-stroke-divider: 1px;
  --pi-stroke-accent: 2px;
  --pi-stroke-focus: 3px;
  --pi-stroke-tab: 3px;

  /* elevation */
  --pi-shadow-product-stage: 0 25px 60px -25px #11182766;
  --pi-shadow-product-card: 0 14px 14px -11px rgba(15,23,42,.25),0 42px 50px -42px rgba(15,23,42,.48);
  --pi-shadow-drawer: -14px 0 45px #11182714;

  /* product-contract */
  --pi-crm-column-width: 360px;
  --pi-crm-card-width: 344px;
  --pi-crm-sidebar-width: 72px;
  --pi-crm-avatar-size: 45px;
  --pi-crm-invoice-avatar-size: 36px;
  --pi-crm-card-padding: 20px;

  /* breakpoint */
  --pi-breakpoint-1200: 1200px;
  --pi-breakpoint-1100: 1100px;
  --pi-breakpoint-1050: 1050px;
  --pi-breakpoint-1000: 1000px;
  --pi-breakpoint-950: 950px;
  --pi-breakpoint-900: 900px;
  --pi-breakpoint-800: 800px;
  --pi-breakpoint-768: 768px;
  --pi-breakpoint-760: 760px;
  --pi-breakpoint-750: 750px;
  --pi-breakpoint-700: 700px;
  --pi-breakpoint-650: 650px;
  --pi-breakpoint-639: 639px;
  --pi-breakpoint-600: 600px;
  --pi-breakpoint-500: 500px;
  --pi-breakpoint-480: 480px;
  --pi-breakpoint-400: 400px;
  --pi-breakpoint-359: 359px;

  /* logo */
  --pi-logo-horizontal-aspect: 440 / 156;
  --pi-logo-splash-width: min(520px,88vw);
  --pi-logo-symbol-module: 30;
  --pi-logo-symbol-stroke: 4;
  --pi-logo-header-width: 220px;
  --pi-logo-header-mobile-width: 160px;
  --pi-logo-footer-max-width: 400px;

  /* motion */
  --pi-duration-feedback: 180ms;
  --pi-duration-drawer: 200ms;
  --pi-duration-interaction: 220ms;
  --pi-duration-heading: 520ms;
  --pi-duration-workflow: 560ms;
  --pi-duration-mosaic: 480ms;
  --pi-duration-route: 600ms;
  --pi-duration-rule: 580ms;
  --pi-duration-footer-rule: 650ms;
  --pi-ease-arrival: cubic-bezier(.2,.75,.2,1);
  --pi-ease-smooth: cubic-bezier(.4,0,.2,1);
  --pi-ease-logo-draw: cubic-bezier(.45,0,.25,1);
  --pi-intro-duration: 3200ms;
  --pi-intro-fallback: 3600ms;
  --pi-intro-light-duration: 1600ms;
  --pi-intro-draw-duration: 1100ms;
  --pi-intro-draw-delay: 80ms;
  --pi-intro-core-duration: 520ms;
  --pi-intro-core-delay: 480ms;
  --pi-intro-name-duration: 800ms;
  --pi-intro-name-delay: 550ms;
  --pi-intro-caption-duration: 650ms;
  --pi-intro-caption-delay: 1000ms;
  --pi-intro-handoff-duration: 1000ms;
  --pi-intro-handoff-delay: 2200ms;
  --pi-intro-home-distance: 6px;

  /* legacy-compatibility */
  --pi-surface: #F8F9FB;
  --pi-divider: #E8EAED;
  --pi-font: Inter, Arial, sans-serif;

  /* current-editorial */
  --pi-editorial-display-size: clamp(64px,7.15vw,108px);
  --pi-editorial-display-leading: 1.02;
  --pi-editorial-display-tracking: -.055em;
  --pi-editorial-display-medium-size: clamp(57px,7.3vw,78px);
  --pi-editorial-display-tablet-size: clamp(52px,9.8vw,78px);
  --pi-editorial-display-mobile-size: clamp(43px,10.5vw,62px);
  --pi-editorial-display-mobile-tracking: -.052em;
  --pi-editorial-heading-size: clamp(44px,5.4vw,76px);
  --pi-editorial-heading-leading: 1.07;
  --pi-editorial-heading-tracking: -.045em;
  --pi-editorial-heading-mobile-size: clamp(36px,8.7vw,49px);
  --pi-editorial-hero-top-space: 52px;
  --pi-editorial-hero-mobile-top-space: 34px;
  --pi-editorial-hero-aside-width: 290px;
  --pi-editorial-hero-heading-gap: 48px;
  --pi-editorial-hero-heading-bottom: 38px;
  --pi-editorial-hero-button-height: 56px;
  --pi-editorial-product-stage-width: calc(100% + 48px);
  --pi-editorial-product-stage-offset: -24px;
  --pi-editorial-product-stage-radius: 12px;
  --pi-editorial-product-stage-shadow: 0 24px 60px -32px #11182770;

  /* current-system */
  --pi-editorial-workspace-height: 720px;
  --pi-editorial-workspace-mobile-height: 780px;

  /* current-editorial */
  --pi-editorial-journey-columns: 4;
  --pi-editorial-journey-node-size: 7px;
  --pi-editorial-journey-title-size: 18px;
  --pi-editorial-journey-copy-size: 11px;
  --pi-editorial-journey-mobile-title-size: 15px;
  --pi-editorial-team-background: var(--pi-ink);
  --pi-editorial-team-section-space: 64px 0 60px;
  --pi-editorial-team-role-count: 4;
  --pi-editorial-team-role-rail-width: 25%;
  --pi-editorial-team-spine-width: auto;
  --pi-editorial-team-spine-medium-width: auto;
  --pi-editorial-team-film-min-height: 0;
  --pi-editorial-team-title-size: 13px;
  --pi-editorial-team-mobile-columns: 2;
  --pi-editorial-pricing-top-space: 68px;
  --pi-editorial-pricing-bottom-space: 68px;
  --pi-editorial-pricing-team-count-size: clamp(56px,5.8vw,76px);
  --pi-editorial-pricing-team-count-mobile-size: clamp(34px,9vw,46px);
  --pi-editorial-pricing-mosaic-max: 270px;
  --pi-editorial-pricing-mosaic-mobile-max: 105px;
  --pi-editorial-pricing-control-height: 76px;
  --pi-editorial-ledger-columns: 1fr 1.2fr;
  --pi-editorial-ledger-row-space: 23px;
  --pi-editorial-ledger-title-size: 17px;
  --pi-editorial-ledger-copy-size: 13px;
  --pi-editorial-questions-space: 68px;
  --pi-editorial-booking-top-space: 64px;
  --pi-editorial-booking-bottom-space: 64px;
  --pi-editorial-booking-title-size: 44px;
  --pi-editorial-booking-title-leading: 1.15;
  --pi-editorial-booking-title-tracking: -1.8px;
  --pi-editorial-booking-topic-height: 74px;
  --pi-editorial-booking-details-padding: 32px;
  --pi-editorial-booking-details-title-size: 32px;
  --pi-editorial-input-size: 16px;
  --pi-editorial-booking-consent-size: 13px;
  --pi-editorial-navigation-breakpoint: 1100px;
  --pi-editorial-stack-breakpoint: 800px;
  --pi-editorial-mobile-breakpoint: 600px;
  --pi-editorial-student-declared-top-space: 100px;
  --pi-editorial-student-declared-bottom-space: 92px;
  --pi-editorial-booking-columns: 150px minmax(0,1fr);
  --pi-editorial-chapter-declared-mobile-space: 57px;
  --pi-editorial-drawer-metric-columns: 2;

  /* current-motion */
  --pi-ease-out: cubic-bezier(.22,1,.36,1);
  --pi-ease-soft: cubic-bezier(.4,0,.2,1);
  --pi-motion-quick: 180ms;
  --pi-motion-ui: 280ms;
  --pi-motion-scene: 240ms;
  --pi-motion-arrival: 640ms;
  --pi-motion-menu: 200ms;
  --pi-motion-drawer: 340ms;
  --pi-motion-control: 320ms;
  --pi-motion-check: 260ms;
  --pi-motion-comparison-delay-1: 32ms;
  --pi-motion-comparison-delay-2: 64ms;

  /* current-system */
  --pi-color-black: #000000;
  --pi-color-ink-hover: #26344A;
  --pi-font-interface: Inter, sans-serif;
  --pi-font-editorial-only: Manrope, sans-serif;
  --pi-font-data: Inter, system-ui, sans-serif;
  --pi-type-body-size: 15px;
  --pi-type-body-leading: 1.8;
  --pi-type-label-size: 11px;
  --pi-type-caption-size: 12px;
  --pi-type-form-label-size: 14px;
  --pi-type-form-input-size: 16px;
  --pi-type-scene-heading-size: 30px;
  --pi-type-story-heading-size: clamp(40px,4.3vw,62px);
  --pi-type-chapter-heading-size: clamp(38px,4.2vw,56px);
  --pi-type-value-heading-size: clamp(38px,4.1vw,56px);
  --pi-type-faq-heading-size: clamp(34px,3.6vw,48px);
  --pi-radius-2: 2px;
  --pi-radius-3: 3px;
  --pi-radius-4: 4px;
  --pi-radius-5: 5px;
  --pi-radius-6: 6px;
  --pi-radius-7: 7px;
  --pi-radius-8: 8px;
  --pi-radius-9: 9px;
  --pi-radius-10: 10px;
  --pi-radius-12: 12px;
  --pi-radius-14: 14px;
  --pi-radius-16: 16px;
  --pi-radius-24: 24px;
  --pi-z-header: 30;
  --pi-z-skip-link: 100;
  --pi-z-record-drawer: 5;
  --pi-layout-anchor-gap: 12px;
  --pi-scene-student-min: 324px;
  --pi-scene-team-min: 464px;
  --pi-scene-team-tablet-min: 506px;
  --pi-scene-team-phone-min: 756px;
  --pi-scene-team-narrow-min: 774px;
  --pi-scene-team-small-min: 810px;
  --pi-scene-student-phone-min: 366px;
  --pi-scene-student-narrow-min: 420px;
  --pi-scene-student-small-min: 440px;

  /* opacity-derived-color */
  --pi-alpha-ink-05: #11182705;
  --pi-alpha-ink-06: #11182706;
  --pi-alpha-ink-08: #11182708;
  --pi-alpha-ink-0a: #1118270A;
  --pi-alpha-ink-0c: #1118270C;
  --pi-alpha-ink-14: #11182714;
  --pi-alpha-ink-18: #11182718;
  --pi-alpha-ink-20: #11182720;
  --pi-alpha-ink-25: #11182725;
  --pi-alpha-ink-30: #11182730;
  --pi-alpha-ink-36: #11182736;
  --pi-alpha-ink-40: #11182740;
  --pi-alpha-ink-50: #11182750;
  --pi-alpha-ink-60: #11182760;
  --pi-alpha-ink-66: #11182766;
  --pi-alpha-ink-70: #11182770;
  --pi-alpha-ink-80: #11182780;
  --pi-alpha-blue-12: #1473F912;
  --pi-alpha-blue-14: #1473F914;
  --pi-alpha-blue-3d: #1473F93D;
  --pi-alpha-cyan-00: #15CFE000;
  --pi-alpha-cyan-30: #15CFE030;
  --pi-alpha-cyan-40: #15CFE040;
  --pi-alpha-white-0d: #FFFFFF0D;
  --pi-alpha-white-20: #FFFFFF20;
  --pi-alpha-white-25: #FFFFFF25;
  --pi-alpha-white-30: #FFFFFF30;
  --pi-alpha-white-40: #FFFFFF40;
  --pi-alpha-white-50: #FFFFFF50;
  --pi-alpha-white-a8: #FFFFFFA8;
  --pi-alpha-white-10: #FFFFFF10;

  /* current-system */
  --pi-student-profile-width: 300px;
  --pi-student-section-space: 68px 0 65px;
  --pi-student-profile-ground: var(--pi-cyan);
  --pi-student-ground: var(--pi-color-paper);
  --pi-logo-kicker-size: 34px;
  --pi-logo-kicker-phone-size: 32px;

  /* opacity-derived-color */
  --pi-alpha-ink-35: #11182735;

  /* current-system */
  --pi-scene-student-compact-min: 366px;
  --pi-scene-student-tablet-min: 384px;
}