/* @basenative/ios — the foundation token stylesheet.
   Generated from src/tokens.js by packages/ios/generate.js; edit the
   data, not this. An original implementation informed by published
   iOS design values — no Apple artwork. See README, "Tokens
   provenance", for which values are documented and which estimated. */
@layer tokens {
  :root {
    /* Font families */
    --bn-ios-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
    --bn-ios-font-family-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;

    /* Type — size, leading, weight, tracking, and the composed shorthand */
    --bn-ios-font-large-title-size: 2.125rem;
    --bn-ios-font-large-title-leading: 1.2059;
    --bn-ios-font-large-title-weight: 400;
    --bn-ios-font-large-title-tracking: -0.015em;
    --bn-ios-font-large-title: 400 2.125rem/1.2059 var(--bn-ios-font-family-display);
    --bn-ios-font-title-1-size: 1.75rem;
    --bn-ios-font-title-1-leading: 1.2143;
    --bn-ios-font-title-1-weight: 400;
    --bn-ios-font-title-1-tracking: -0.012em;
    --bn-ios-font-title-1: 400 1.75rem/1.2143 var(--bn-ios-font-family-display);
    --bn-ios-font-title-2-size: 1.375rem;
    --bn-ios-font-title-2-leading: 1.2727;
    --bn-ios-font-title-2-weight: 400;
    --bn-ios-font-title-2-tracking: -0.008em;
    --bn-ios-font-title-2: 400 1.375rem/1.2727 var(--bn-ios-font-family-display);
    --bn-ios-font-title-3-size: 1.25rem;
    --bn-ios-font-title-3-leading: 1.25;
    --bn-ios-font-title-3-weight: 400;
    --bn-ios-font-title-3-tracking: -0.006em;
    --bn-ios-font-title-3: 400 1.25rem/1.25 var(--bn-ios-font-family-display);
    --bn-ios-font-headline-size: 1.0625rem;
    --bn-ios-font-headline-leading: 1.2941;
    --bn-ios-font-headline-weight: 600;
    --bn-ios-font-headline-tracking: -0.002em;
    --bn-ios-font-headline: 600 1.0625rem/1.2941 var(--bn-ios-font-family);
    --bn-ios-font-body-size: 1.0625rem;
    --bn-ios-font-body-leading: 1.2941;
    --bn-ios-font-body-weight: 400;
    --bn-ios-font-body-tracking: -0.002em;
    --bn-ios-font-body: 400 1.0625rem/1.2941 var(--bn-ios-font-family);
    --bn-ios-font-callout-size: 1rem;
    --bn-ios-font-callout-leading: 1.3125;
    --bn-ios-font-callout-weight: 400;
    --bn-ios-font-callout-tracking: -0.001em;
    --bn-ios-font-callout: 400 1rem/1.3125 var(--bn-ios-font-family);
    --bn-ios-font-subheadline-size: 0.9375rem;
    --bn-ios-font-subheadline-leading: 1.3333;
    --bn-ios-font-subheadline-weight: 400;
    --bn-ios-font-subheadline-tracking: 0em;
    --bn-ios-font-subheadline: 400 0.9375rem/1.3333 var(--bn-ios-font-family);
    --bn-ios-font-footnote-size: 0.8125rem;
    --bn-ios-font-footnote-leading: 1.3846;
    --bn-ios-font-footnote-weight: 400;
    --bn-ios-font-footnote-tracking: 0.004em;
    --bn-ios-font-footnote: 400 0.8125rem/1.3846 var(--bn-ios-font-family);
    --bn-ios-font-caption-1-size: 0.75rem;
    --bn-ios-font-caption-1-leading: 1.3333;
    --bn-ios-font-caption-1-weight: 400;
    --bn-ios-font-caption-1-tracking: 0.008em;
    --bn-ios-font-caption-1: 400 0.75rem/1.3333 var(--bn-ios-font-family);
    --bn-ios-font-caption-2-size: 0.6875rem;
    --bn-ios-font-caption-2-leading: 1.1818;
    --bn-ios-font-caption-2-weight: 400;
    --bn-ios-font-caption-2-tracking: 0.011em;
    --bn-ios-font-caption-2: 400 0.6875rem/1.1818 var(--bn-ios-font-family);

    /* Corner radii */
    --bn-ios-radius-none: 0;
    --bn-ios-radius-xs: 0.25rem;
    --bn-ios-radius-sm: 0.5rem;
    --bn-ios-radius-md: 0.625rem;
    --bn-ios-radius-lg: 0.75rem;
    --bn-ios-radius-xl: 1rem;
    --bn-ios-radius-2xl: 1.25rem;
    --bn-ios-radius-3xl: 1.5rem;
    --bn-ios-radius-4xl: 1.75rem;
    --bn-ios-radius-pill: 9999px;

    /* Spacing — the 8pt grid */
    --bn-ios-space-1: 0.25rem;
    --bn-ios-space-2: 0.5rem;
    --bn-ios-space-3: 0.75rem;
    --bn-ios-space-4: 1rem;
    --bn-ios-space-5: 1.25rem;
    --bn-ios-space-6: 1.5rem;
    --bn-ios-space-7: 2rem;
    --bn-ios-space-8: 2.5rem;

    /* Safe area — supplied by the device at runtime */
    --bn-ios-safe-top: env(safe-area-inset-top, 0px);
    --bn-ios-safe-right: env(safe-area-inset-right, 0px);
    --bn-ios-safe-bottom: env(safe-area-inset-bottom, 0px);
    --bn-ios-safe-left: env(safe-area-inset-left, 0px);

    /* Layout constants */
    --bn-ios-margin: 1rem;
    --bn-ios-margin-wide: 1.25rem;
    --bn-ios-hairline: 0.5px;

    /* Breakpoints — the named size-class stops, as min-widths */
    --bn-ios-breakpoint-watch: 100px;
    --bn-ios-breakpoint-phone: 390px;
    --bn-ios-breakpoint-duo-cover: 446px;
    --bn-ios-breakpoint-tablet: 768px;
    --bn-ios-breakpoint-duo-inner: 939px;
    --bn-ios-breakpoint-desktop: 1024px;
    --bn-ios-breakpoint-wide: 1600px;

    /* Fold — the viewport segments, supplied by the device at runtime */
    --bn-ios-fold-segments: 2;
    --bn-ios-fold-segment-width: env(viewport-segment-width 0 0, 100vw);
    --bn-ios-fold-segment-height: env(viewport-segment-height 0 0, 100vh);
    --bn-ios-fold-second-segment-left: env(viewport-segment-left 1 0, 100vw);
    --bn-ios-fold-crease-safe-margin: 1rem;

    /* Motion — duration, curve, and the composed shorthand */
    --bn-ios-motion-spring-duration: 550ms;
    --bn-ios-motion-spring-timing: cubic-bezier(0.32, 0.72, 0, 1);
    --bn-ios-motion-spring: 550ms cubic-bezier(0.32, 0.72, 0, 1);
    --bn-ios-motion-spring-bouncy-duration: 700ms;
    --bn-ios-motion-spring-bouncy-timing: cubic-bezier(0.34, 1.3, 0.32, 1);
    --bn-ios-motion-spring-bouncy: 700ms cubic-bezier(0.34, 1.3, 0.32, 1);
    --bn-ios-motion-spring-stiff-duration: 380ms;
    --bn-ios-motion-spring-stiff-timing: cubic-bezier(0.36, 0.9, 0.24, 1);
    --bn-ios-motion-spring-stiff: 380ms cubic-bezier(0.36, 0.9, 0.24, 1);
    --bn-ios-motion-fade-duration: 250ms;
    --bn-ios-motion-fade-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
    --bn-ios-motion-fade: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Glass — the scheme-independent channels (blur, saturation, backdrop) */
    --bn-ios-glass-ultra-thin-blur: 8px;
    --bn-ios-glass-ultra-thin-saturate: 160%;
    --bn-ios-glass-ultra-thin-backdrop: blur(8px) saturate(160%);
    --bn-ios-glass-thin-blur: 12px;
    --bn-ios-glass-thin-saturate: 170%;
    --bn-ios-glass-thin-backdrop: blur(12px) saturate(170%);
    --bn-ios-glass-regular-blur: 20px;
    --bn-ios-glass-regular-saturate: 180%;
    --bn-ios-glass-regular-backdrop: blur(20px) saturate(180%);
    --bn-ios-glass-thick-blur: 30px;
    --bn-ios-glass-thick-saturate: 190%;
    --bn-ios-glass-thick-backdrop: blur(30px) saturate(190%);

    /* Colours — light */
    --bn-ios-color-blue: #007aff;
    --bn-ios-color-green: #34c759;
    --bn-ios-color-indigo: #5856d6;
    --bn-ios-color-orange: #ff9500;
    --bn-ios-color-pink: #ff2d55;
    --bn-ios-color-purple: #af52de;
    --bn-ios-color-red: #ff3b30;
    --bn-ios-color-teal: #5ac8fa;
    --bn-ios-color-yellow: #ffcc00;
    --bn-ios-color-mint: #00c7be;
    --bn-ios-color-cyan: #32ade6;
    --bn-ios-color-brown: #a2845e;
    --bn-ios-color-gray: #8e8e93;
    --bn-ios-color-gray-2: #aeaeb2;
    --bn-ios-color-gray-3: #c7c7cc;
    --bn-ios-color-gray-4: #d1d1d6;
    --bn-ios-color-gray-5: #e5e5ea;
    --bn-ios-color-gray-6: #f2f2f7;
    --bn-ios-color-label: #000000;
    --bn-ios-color-label-secondary: rgb(60 60 67 / 0.6);
    --bn-ios-color-label-tertiary: rgb(60 60 67 / 0.3);
    --bn-ios-color-label-quaternary: rgb(60 60 67 / 0.18);
    --bn-ios-color-placeholder: rgb(60 60 67 / 0.3);
    --bn-ios-color-bg: #ffffff;
    --bn-ios-color-bg-secondary: #f2f2f7;
    --bn-ios-color-bg-tertiary: #ffffff;
    --bn-ios-color-bg-grouped: #f2f2f7;
    --bn-ios-color-bg-grouped-secondary: #ffffff;
    --bn-ios-color-bg-grouped-tertiary: #f2f2f7;
    --bn-ios-color-fill: rgb(120 120 128 / 0.2);
    --bn-ios-color-fill-secondary: rgb(120 120 128 / 0.16);
    --bn-ios-color-fill-tertiary: rgb(118 118 128 / 0.12);
    --bn-ios-color-fill-quaternary: rgb(116 116 128 / 0.08);
    --bn-ios-color-separator: rgb(60 60 67 / 0.29);
    --bn-ios-color-separator-opaque: #c6c6c8;
    --bn-ios-color-link: #007aff;

    /* Glass — light tint, edge highlight, shadow */
    --bn-ios-glass-ultra-thin-tint: rgb(255 255 255 / 0.35);
    --bn-ios-glass-ultra-thin-highlight: inset 0 1px 0 rgb(255 255 255 / 0.4);
    --bn-ios-glass-ultra-thin-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    --bn-ios-glass-thin-tint: rgb(255 255 255 / 0.45);
    --bn-ios-glass-thin-highlight: inset 0 1px 0 rgb(255 255 255 / 0.45);
    --bn-ios-glass-thin-shadow: 0 10px 28px rgb(0 0 0 / 0.1);
    --bn-ios-glass-regular-tint: rgb(255 255 255 / 0.55);
    --bn-ios-glass-regular-highlight: inset 0 1px 0 rgb(255 255 255 / 0.5);
    --bn-ios-glass-regular-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
    --bn-ios-glass-thick-tint: rgb(249 249 249 / 0.78);
    --bn-ios-glass-thick-highlight: inset 0 1px 0 rgb(255 255 255 / 0.55);
    --bn-ios-glass-thick-shadow: 0 16px 40px rgb(0 0 0 / 0.16);

    /* Scroll edge — the fade a bar dissolves into */
    --bn-ios-scroll-edge: 1.25rem;
    --bn-ios-scroll-edge-fade: linear-gradient(to bottom, var(--bn-ios-color-bg), transparent);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* Colours — dark */
      --bn-ios-color-blue: #0a84ff;
      --bn-ios-color-green: #30d158;
      --bn-ios-color-indigo: #5e5ce6;
      --bn-ios-color-orange: #ff9f0a;
      --bn-ios-color-pink: #ff375f;
      --bn-ios-color-purple: #bf5af2;
      --bn-ios-color-red: #ff453a;
      --bn-ios-color-teal: #64d2ff;
      --bn-ios-color-yellow: #ffd60a;
      --bn-ios-color-mint: #66d4cf;
      --bn-ios-color-cyan: #64d2ff;
      --bn-ios-color-brown: #ac8e68;
      --bn-ios-color-gray: #8e8e93;
      --bn-ios-color-gray-2: #636366;
      --bn-ios-color-gray-3: #48484a;
      --bn-ios-color-gray-4: #3a3a3c;
      --bn-ios-color-gray-5: #2c2c2e;
      --bn-ios-color-gray-6: #1c1c1e;
      --bn-ios-color-label: #ffffff;
      --bn-ios-color-label-secondary: rgb(235 235 245 / 0.6);
      --bn-ios-color-label-tertiary: rgb(235 235 245 / 0.3);
      --bn-ios-color-label-quaternary: rgb(235 235 245 / 0.16);
      --bn-ios-color-placeholder: rgb(235 235 245 / 0.3);
      --bn-ios-color-bg: #000000;
      --bn-ios-color-bg-secondary: #1c1c1e;
      --bn-ios-color-bg-tertiary: #2c2c2e;
      --bn-ios-color-bg-grouped: #000000;
      --bn-ios-color-bg-grouped-secondary: #1c1c1e;
      --bn-ios-color-bg-grouped-tertiary: #2c2c2e;
      --bn-ios-color-fill: rgb(120 120 128 / 0.36);
      --bn-ios-color-fill-secondary: rgb(120 120 128 / 0.32);
      --bn-ios-color-fill-tertiary: rgb(118 118 128 / 0.24);
      --bn-ios-color-fill-quaternary: rgb(118 118 128 / 0.18);
      --bn-ios-color-separator: rgb(84 84 88 / 0.6);
      --bn-ios-color-separator-opaque: #38383a;
      --bn-ios-color-link: #0a84ff;

      /* Glass — dark tint, edge highlight, shadow */
      --bn-ios-glass-ultra-thin-tint: rgb(28 28 30 / 0.35);
      --bn-ios-glass-ultra-thin-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
      --bn-ios-glass-ultra-thin-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
      --bn-ios-glass-thin-tint: rgb(28 28 30 / 0.45);
      --bn-ios-glass-thin-highlight: inset 0 1px 0 rgb(255 255 255 / 0.15);
      --bn-ios-glass-thin-shadow: 0 10px 28px rgb(0 0 0 / 0.4);
      --bn-ios-glass-regular-tint: rgb(30 30 32 / 0.55);
      --bn-ios-glass-regular-highlight: inset 0 1px 0 rgb(255 255 255 / 0.18);
      --bn-ios-glass-regular-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
      --bn-ios-glass-thick-tint: rgb(28 28 30 / 0.78);
      --bn-ios-glass-thick-highlight: inset 0 1px 0 rgb(255 255 255 / 0.22);
      --bn-ios-glass-thick-shadow: 0 16px 40px rgb(0 0 0 / 0.5);

      /* Scroll edge — the fade a bar dissolves into */
      --bn-ios-scroll-edge: 1.25rem;
      --bn-ios-scroll-edge-fade: linear-gradient(to bottom, var(--bn-ios-color-bg), transparent);
    }
  }

  [data-theme="dark"] {
    /* Colours — dark */
    --bn-ios-color-blue: #0a84ff;
    --bn-ios-color-green: #30d158;
    --bn-ios-color-indigo: #5e5ce6;
    --bn-ios-color-orange: #ff9f0a;
    --bn-ios-color-pink: #ff375f;
    --bn-ios-color-purple: #bf5af2;
    --bn-ios-color-red: #ff453a;
    --bn-ios-color-teal: #64d2ff;
    --bn-ios-color-yellow: #ffd60a;
    --bn-ios-color-mint: #66d4cf;
    --bn-ios-color-cyan: #64d2ff;
    --bn-ios-color-brown: #ac8e68;
    --bn-ios-color-gray: #8e8e93;
    --bn-ios-color-gray-2: #636366;
    --bn-ios-color-gray-3: #48484a;
    --bn-ios-color-gray-4: #3a3a3c;
    --bn-ios-color-gray-5: #2c2c2e;
    --bn-ios-color-gray-6: #1c1c1e;
    --bn-ios-color-label: #ffffff;
    --bn-ios-color-label-secondary: rgb(235 235 245 / 0.6);
    --bn-ios-color-label-tertiary: rgb(235 235 245 / 0.3);
    --bn-ios-color-label-quaternary: rgb(235 235 245 / 0.16);
    --bn-ios-color-placeholder: rgb(235 235 245 / 0.3);
    --bn-ios-color-bg: #000000;
    --bn-ios-color-bg-secondary: #1c1c1e;
    --bn-ios-color-bg-tertiary: #2c2c2e;
    --bn-ios-color-bg-grouped: #000000;
    --bn-ios-color-bg-grouped-secondary: #1c1c1e;
    --bn-ios-color-bg-grouped-tertiary: #2c2c2e;
    --bn-ios-color-fill: rgb(120 120 128 / 0.36);
    --bn-ios-color-fill-secondary: rgb(120 120 128 / 0.32);
    --bn-ios-color-fill-tertiary: rgb(118 118 128 / 0.24);
    --bn-ios-color-fill-quaternary: rgb(118 118 128 / 0.18);
    --bn-ios-color-separator: rgb(84 84 88 / 0.6);
    --bn-ios-color-separator-opaque: #38383a;
    --bn-ios-color-link: #0a84ff;

    /* Glass — dark tint, edge highlight, shadow */
    --bn-ios-glass-ultra-thin-tint: rgb(28 28 30 / 0.35);
    --bn-ios-glass-ultra-thin-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
    --bn-ios-glass-ultra-thin-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
    --bn-ios-glass-thin-tint: rgb(28 28 30 / 0.45);
    --bn-ios-glass-thin-highlight: inset 0 1px 0 rgb(255 255 255 / 0.15);
    --bn-ios-glass-thin-shadow: 0 10px 28px rgb(0 0 0 / 0.4);
    --bn-ios-glass-regular-tint: rgb(30 30 32 / 0.55);
    --bn-ios-glass-regular-highlight: inset 0 1px 0 rgb(255 255 255 / 0.18);
    --bn-ios-glass-regular-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
    --bn-ios-glass-thick-tint: rgb(28 28 30 / 0.78);
    --bn-ios-glass-thick-highlight: inset 0 1px 0 rgb(255 255 255 / 0.22);
    --bn-ios-glass-thick-shadow: 0 16px 40px rgb(0 0 0 / 0.5);

    /* Scroll edge — the fade a bar dissolves into */
    --bn-ios-scroll-edge: 1.25rem;
    --bn-ios-scroll-edge-fade: linear-gradient(to bottom, var(--bn-ios-color-bg), transparent);
  }
}