/* Mozee tokens. Resolved from apple.design.md + brand/logo/GUIDELINES.md.
   One layer. Every concept imports this file and uses only these variables. */

@font-face {
  font-family: "Inter"; /* ds-allow-hardcode: @font-face declaration */
  src: url("fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour: one interactive blue, neutrals carry the rest */
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;
  --color-ink: #1d1d1f;
  --color-ink-muted-80: #333333;
  --color-ink-muted-56: #6e6e73;
  --color-ink-muted-48: #7a7a7a;
  --color-body-on-dark: #ffffff;
  --color-body-muted-on-dark: #cccccc;
  --color-hairline: #e0e0e0;
  --color-divider-soft: #f0f0f0;
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;
  --color-surface-tile-1: #272729;
  --color-surface-tile-2: #2a2a2c;
  --color-surface-tile-3: #252527;
  --color-surface-black: #000000;
  --color-on-primary: #ffffff;
  --color-hairline-alpha: rgba(0, 0, 0, 0.08);
  --color-hairline-on-dark: rgba(255, 255, 255, 0.12);
  --color-frost-light: rgba(245, 245, 247, 0.8);
  --color-frost-dark: rgba(22, 22, 23, 0.8);
  --color-chip-translucent: rgba(210, 210, 215, 0.64);
  --color-success: #1d7d3a;       /* status text on light, 5.4:1 on white */
  --color-success-on-dark: #30d158;

  /* Type */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  --text-hero: clamp(2.5rem, 1.6rem + 4vw, 5rem);       /* 40 -> 80 */
  --text-display-lg: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); /* 32 -> 56 */
  --text-display-md: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28 -> 40 */
  --text-lead: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);  /* 21 -> 28 */
  --text-lead-airy: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20 -> 24 */
  --text-tagline: 1.3125rem;  /* 21 */
  --text-body: 1.0625rem;     /* 17 */
  --text-caption: 0.875rem;   /* 14 */
  --text-fine: 0.75rem;       /* 12 */

  --leading-hero: 1.05;
  --leading-display: 1.1;
  --leading-lead: 1.2;
  --leading-body: 1.47;
  --leading-caption: 1.43;
  --leading-dense-link: 2.41;

  --tracking-hero: -0.015em;
  --tracking-display: -0.01em;
  --tracking-body: -0.022em;
  --tracking-caption: -0.016em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space: 8px base */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-section: clamp(64px, 4rem + 4vw, 128px);

  --container-text: 980px;
  --container-wide: 1200px;
  --container-max: 1440px;

  /* Radius grammar: 0 tiles, 8 utility, 18 cards, pill actions */
  --radius-none: 0;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* The one shadow, product imagery only */
  --shadow-product: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);

  --blur-frost: saturate(180%) blur(20px);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-press: 120ms;
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --press-scale: 0.97;

  --target-min: 44px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --offscreen: -100px;
  --duration-none: 0.01ms;
  --nav-height: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary-focus);
  outline-offset: var(--focus-ring-offset);
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--offscreen);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-body-on-dark);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { top: var(--space-xs); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--duration-none) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duration-none) !important;
    scroll-behavior: auto !important;
  }
}