/* GENERATED by tools/generate-web-tokens. Do not edit — re-run the tool.
 *
 * Every custom property below comes out of Hoozat/design-system/tokens, through the
 * same reader and the same alias resolution that tools/generate-tokens uses to write
 * the app's Swift. The site and the app therefore cannot drift from each other, and
 * neither can drift from Figma.
 *
 * Semantic tokens are bare. Primitives are under --p-, so that reaching past the
 * semantic layer is greppable: `grep -r 'var(--p-' web/`.
 */

:root {
  /* colour — semantic */
  --colour-action-default: rgba(246, 236, 226, 0.1);
  --colour-action-pressed: rgba(246, 236, 226, 0.2);
  --colour-action-primary-default: rgba(189, 62, 186, 0.8);
  --colour-action-primary-pressed: rgba(189, 62, 186, 0.9);
  --colour-action-seconary-default: rgba(246, 236, 226, 0.1);
  --colour-action-secondary-pressed: rgba(246, 236, 226, 0.2);
  --colour-background-page: #11182a;
  --colour-background-surface: rgba(246, 236, 226, 0.1);
  --colour-background-surface-raised: rgba(246, 236, 226, 0.1);
  --colour-border-brand-corner: rgba(255, 255, 255, 0.5);
  --colour-border-default: rgba(246, 236, 226, 0.2);
  --colour-border-pressed: rgba(246, 236, 226, 0.2);
  --colour-border-solid-inverse: #11182a;
  --colour-border-solid: #f6ece2;
  --colour-brand-coral: #db1e51;
  --colour-brand-gold: #f6d792;
  --colour-brand-ivory: #f6ece2;
  --colour-brand-navy: #11182a;
  --colour-brand-pink: #bd3eba;
  --colour-brand-plum: #bd3eba;
  --colour-brand-red: #db1f51;
  --colour-glow-coral-glow: rgba(219, 30, 81, 0.4);
  --colour-glow-coral-soft-glow: rgba(219, 30, 81, 0.2);
  --colour-glow-gold-glow: rgba(226, 192, 117, 0.5);
  --colour-glow-pink-glow: rgba(189, 62, 186, 0.4);
  --colour-glow-pink-soft-glow: rgba(189, 62, 186, 0.2);
  --colour-glow-plum-glow: rgba(189, 62, 186, 0.5);
  --colour-glow-red-glow: rgba(219, 31, 81, 0.5);
  --colour-gradient-gradient-0: rgba(18, 25, 43, 0);
  --colour-gradient-gradient-100: #11182a;
  --colour-icon-icon: #f6ece2;
  --colour-icon-icon-pressed: #ded9d2;
  --colour-text-body: #f6ece2;
  --colour-text-display: #f6ece2;
  --colour-text-heading: #f6ece2;
  --colour-text-label: #f6ece2;
  --colour-text-label-pressed: #ded9d2;
  --colour-text-tag: #f6ece2;
  --colour-text-tag-inverse: #11182a;
  --colour-text-title: #f6ece2;

  /* space — semantic */
  --space-component-lg: 16px;
  --space-component-md: 12px;
  --space-component-sm: 8px;
  --space-component-xl: 24px;
  --space-component-xs: 4px;
  --space-control-inset-lg: 24px;
  --space-control-inset-md: 20px;
  --space-control-inset-sm: 16px;
  --space-layout-2xl: 48px;
  --space-layout-3xl: 64px;
  --space-layout-lg: 32px;
  --space-layout-md: 24px;
  --space-layout-sm: 16px;
  --space-layout-xl: 40px;
  --space-layout-xs: 8px;

  /* size — semantic */
  --size-control-lg: 48px;
  --size-control-md: 40px;
  --size-control-sm: 32px;
  --size-icon-2xl: 40px;
  --size-icon-lg: 24px;
  --size-icon-md: 20px;
  --size-icon-sm: 16px;
  --size-icon-xl: 32px;
  --size-target-min: 44px;

  /* radius — semantic */
  --radius-badge: 9999px;
  --radius-button: 9999px;
  --radius-card: 16px;
  --radius-card-container: 12px;
  --radius-focus-ring: 16px;
  --radius-input: 12px;
  --radius-media: 12px;
  --radius-modal: 16px;
  --radius-popover: 16px;
  --radius-sheet: 16px;
  --radius-tag: 4px;

  /* stroke — semantic */
  --stroke-default: 1px;
  --stroke-focus: 2px;
  --stroke-strong: 2px;

  /* opacity — semantic */
  --opacity-disabled: 0.4;
  --opacity-hover: 0.1;
  --opacity-overlay: 0.6;
  --opacity-pressed: 0.2;

  /* elevation — semantic */
  --elevation-blur-1: 4px;
  --elevation-blur-2: 8px;
  --elevation-blur-3: 16px;
  --elevation-blur-4: 32px;
  --elevation-blur-glow: 256px;
  --elevation-blur-image: 256px;
  --elevation-spread-1: 0;
  --elevation-spread-2: -1px;
  --elevation-spread-3: -2px;
  --elevation-spread-4: -4px;
  --elevation-y-1: 1px;
  --elevation-y-2: 4px;
  --elevation-y-3: 8px;
  --elevation-y-4: 16px;

  /* font — semantic */
  --font-family-brand: "Sofia Pro Soft", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-family-ui: "Inter Tight", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-line-height-body: 16.5px;
  --font-line-height-display: 12px;
  --font-line-height-heading: 13.5px;
  --font-line-height-label: 15px;
  --font-line-height-odds: 12px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-display-lg: 64px;
  --font-size-display-sm: 48px;
  --font-size-heading-lg: 32px;
  --font-size-heading-md: 24px;
  --font-size-heading-sm: 20px;
  --font-size-heading-xl: 40px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --font-size-label-xs: 10px;
  --font-size-odds-lg: 20px;
  --font-size-odds-md: 16px;
  --font-size-odds-sm: 14px;
  --font-tracking-body: 0;
  --font-tracking-display: 0;
  --font-tracking-heading: 0;
  --font-tracking-label: 0.09px;
  --font-tracking-micro: 0.09px;
  --font-weight-body: 500;
  --font-weight-brand: 600;
  --font-weight-display: 700;
  --font-weight-heading: 600;
  --font-weight-label: 600;
  --font-weight-odds: 700;

  /* motion — semantic */
  --motion-duration-lg: 0.35s;
  --motion-duration-md: 0.22s;
  --motion-duration-sm: 0.14s;
  --motion-duration-xs: 0.1s;
  --motion-ease-sharp: cubic-bezier(0.87, 0, 0.13, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* font leading — the published px over ten, which is the multiplier the token
     set means. See LINE HEIGHTS in the generator. The px originals are below. */
  --font-leading-body: 1.65;
  --font-leading-display: 1.2;
  --font-leading-heading: 1.35;
  --font-leading-label: 1.5;
  --p-font-leading-loose: 1.7;
  --p-font-leading-none: 1;
  --p-font-leading-normal: 1.5;
  --font-leading-odds: 1.2;
  --p-font-leading-relaxed: 1.65;
  --p-font-leading-snug: 1.35;
  --p-font-leading-tight: 1.2;

  /* colour — primitives (rule 3: prefer the semantics above) */
  --p-colour-base-0: #f6ece2;
  --p-colour-base-100: #ded9d2;
  --p-colour-base-1000: #11182a;
  --p-colour-base-200: #c8c3bf;
  --p-colour-base-300: #b2adac;
  --p-colour-base-400: #9a9899;
  --p-colour-base-500: #838387;
  --p-colour-base-600: #6e6e74;
  --p-colour-base-700: #555961;
  --p-colour-base-800: #3f4250;
  --p-colour-base-900: #282e3d;
  --p-colour-coral-alpha-0: rgba(219, 30, 81, 0);
  --p-colour-coral-alpha-1: rgba(219, 30, 81, 0.1);
  --p-colour-coral-alpha-2: rgba(219, 30, 81, 0.2);
  --p-colour-coral-alpha-3: rgba(219, 30, 81, 0.3);
  --p-colour-coral-alpha-4: rgba(219, 30, 81, 0.4);
  --p-colour-coral-alpha-5: rgba(219, 30, 81, 0.5);
  --p-colour-coral-alpha-6: rgba(219, 30, 81, 0.6);
  --p-colour-coral-alpha-7: rgba(219, 30, 81, 0.7);
  --p-colour-coral-alpha-8: rgba(219, 30, 81, 0.8);
  --p-colour-coral-alpha-9: rgba(219, 30, 81, 0.9);
  --p-colour-coral-100: #f1c3c5;
  --p-colour-coral-200: #eb9aa8;
  --p-colour-coral-300: #e6718b;
  --p-colour-coral-400: #e0486e;
  --p-colour-coral-500: #db1e51;
  --p-colour-coral-600: #b41d49;
  --p-colour-coral-700: #8a1c41;
  --p-colour-coral-800: #611a39;
  --p-colour-coral-900: #391831;
  --p-colour-gold-alpha-0: rgba(226, 192, 117, 0);
  --p-colour-gold-alpha-1: rgba(226, 192, 117, 0.1);
  --p-colour-gold-alpha-2: rgba(226, 192, 117, 0.2);
  --p-colour-gold-alpha-3: rgba(226, 192, 117, 0.3);
  --p-colour-gold-alpha-4: rgba(226, 192, 117, 0.4);
  --p-colour-gold-alpha-5: rgba(226, 192, 117, 0.5);
  --p-colour-gold-alpha-6: rgba(226, 192, 117, 0.6);
  --p-colour-gold-alpha-7: rgba(226, 192, 117, 0.7);
  --p-colour-gold-alpha-8: rgba(226, 192, 117, 0.8);
  --p-colour-gold-alpha-9: rgba(226, 192, 117, 0.9);
  --p-colour-gold-100: #f5e9d4;
  --p-colour-gold-200: #f5e3c2;
  --p-colour-gold-300: #f7dfb3;
  --p-colour-gold-400: #f7dba2;
  --p-colour-gold-500: #f6d792;
  --p-colour-gold-600: #c8b17c;
  --p-colour-gold-700: #9b8a68;
  --p-colour-gold-800: #6e6354;
  --p-colour-gold-900: #3f3e3f;
  --p-colour-ivory-alpha-0: rgba(246, 236, 226, 0);
  --p-colour-ivory-alpha-1: rgba(246, 236, 226, 0.1);
  --p-colour-ivory-alpha-2: rgba(246, 236, 226, 0.2);
  --p-colour-ivory-alpha-3: rgba(246, 236, 226, 0.3);
  --p-colour-ivory-alpha-4: rgba(246, 236, 226, 0.4);
  --p-colour-ivory-alpha-5: rgba(246, 236, 226, 0.5);
  --p-colour-ivory-alpha-6: rgba(246, 236, 226, 0.6);
  --p-colour-ivory-alpha-7: rgba(246, 236, 226, 0.7);
  --p-colour-ivory-alpha-8: rgba(246, 236, 226, 0.8);
  --p-colour-ivory-alpha-9: rgba(246, 236, 226, 0.9);
  --p-colour-navy-alpha-0: rgba(18, 25, 43, 0);
  --p-colour-navy-alpha-1: rgba(18, 25, 43, 0.1);
  --p-colour-navy-alpha-2: rgba(18, 25, 43, 0.2);
  --p-colour-navy-alpha-3: rgba(18, 25, 43, 0.3);
  --p-colour-navy-alpha-4: rgba(18, 25, 43, 0.4);
  --p-colour-navy-alpha-5: rgba(18, 25, 43, 0.5);
  --p-colour-navy-alpha-6: rgba(18, 25, 43, 0.6);
  --p-colour-navy-alpha-7: rgba(18, 25, 43, 0.7);
  --p-colour-navy-alpha-8: rgba(18, 25, 43, 0.8);
  --p-colour-navy-alpha-9: rgba(18, 25, 43, 0.9);
  --p-colour-pink-alpha-0: rgba(189, 62, 186, 0);
  --p-colour-pink-alpha-1: rgba(189, 62, 186, 0.1);
  --p-colour-pink-alpha-2: rgba(189, 62, 186, 0.2);
  --p-colour-pink-alpha-3: rgba(189, 62, 186, 0.3);
  --p-colour-pink-alpha-4: rgba(189, 62, 186, 0.4);
  --p-colour-pink-alpha-5: rgba(189, 62, 186, 0.5);
  --p-colour-pink-alpha-6: rgba(189, 62, 186, 0.6);
  --p-colour-pink-alpha-7: rgba(189, 62, 186, 0.7);
  --p-colour-pink-alpha-8: rgba(189, 62, 186, 0.8);
  --p-colour-pink-alpha-9: rgba(189, 62, 186, 0.9);
  --p-colour-pink-100: #ebc9da;
  --p-colour-pink-200: #dfa6d3;
  --p-colour-pink-300: #d484c9;
  --p-colour-pink-400: #c860c2;
  --p-colour-pink-500: #bd3eba;
  --p-colour-pink-600: #9b369d;
  --p-colour-pink-700: #782e80;
  --p-colour-pink-800: #562764;
  --p-colour-pink-900: #331f47;
  --p-colour-plum-alpha-0: rgba(189, 62, 186, 0);
  --p-colour-plum-alpha-1: rgba(189, 62, 186, 0.1);
  --p-colour-plum-alpha-2: rgba(189, 62, 186, 0.2);
  --p-colour-plum-alpha-3: rgba(189, 62, 186, 0.3);
  --p-colour-plum-alpha-4: rgba(189, 62, 186, 0.4);
  --p-colour-plum-alpha-5: rgba(189, 62, 186, 0.5);
  --p-colour-plum-alpha-6: rgba(189, 62, 186, 0.6);
  --p-colour-plum-alpha-7: rgba(189, 62, 186, 0.7);
  --p-colour-plum-alpha-8: rgba(189, 62, 186, 0.8);
  --p-colour-plum-alpha-9: rgba(189, 62, 186, 0.9);
  --p-colour-plum-100: #d6c7c7;
  --p-colour-plum-200: #b7a1ab;
  --p-colour-plum-300: #977d91;
  --p-colour-plum-400: #785674;
  --p-colour-plum-500: #bd3eba;
  --p-colour-plum-600: #4b2c4f;
  --p-colour-plum-700: #3d2846;
  --p-colour-plum-800: #2d223c;
  --p-colour-plum-900: #1f1d33;
  --p-colour-red-alpha-0: rgba(219, 31, 81, 0);
  --p-colour-red-alpha-1: rgba(219, 31, 81, 0.1);
  --p-colour-red-alpha-2: rgba(219, 31, 81, 0.2);
  --p-colour-red-alpha-3: rgba(219, 31, 81, 0.3);
  --p-colour-red-alpha-4: rgba(219, 31, 81, 0.4);
  --p-colour-red-alpha-5: rgba(219, 31, 81, 0.5);
  --p-colour-red-alpha-6: rgba(219, 31, 81, 0.6);
  --p-colour-red-alpha-7: rgba(219, 31, 81, 0.7);
  --p-colour-red-alpha-8: rgba(219, 31, 81, 0.8);
  --p-colour-red-alpha-9: rgba(219, 31, 81, 0.9);
  --p-colour-red-100: #f3c6bf;
  --p-colour-red-200: #f1a09c;
  --p-colour-red-300: #ee7a76;
  --p-colour-red-400: #ed5452;
  --p-colour-red-500: #db1f51;
  --p-colour-red-600: #bf292c;
  --p-colour-red-700: #93252c;
  --p-colour-red-800: #68202b;
  --p-colour-red-900: #3c1a2a;

  /* space — primitives (rule 3: prefer the semantics above) */
  --p-space-0: 0;
  --p-space-1: 4px;
  --p-space-10: 40px;
  --p-space-11: 44px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-space-2: 8px;
  --p-space-20: 80px;
  --p-space-24: 96px;
  --p-space-3: 12px;
  --p-space-32: 128px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;

  /* radius — primitives (rule 3: prefer the semantics above) */
  --p-radius-0: 0;
  --p-radius-12: 12px;
  --p-radius-16: 16px;
  --p-radius-20: 20px;
  --p-radius-24: 24px;
  --p-radius-4: 4px;
  --p-radius-8: 8px;
  --p-radius-full: 9999px;

  /* stroke — primitives (rule 3: prefer the semantics above) */
  --p-stroke-0: 0;
  --p-stroke-1: 1px;
  --p-stroke-2: 2px;
  --p-stroke-4: 4px;

  /* opacity — primitives (rule 3: prefer the semantics above) */
  --p-opacity-0: 0;
  --p-opacity-10: 0.1;
  --p-opacity-100: 1;
  --p-opacity-20: 0.2;
  --p-opacity-30: 0.3;
  --p-opacity-40: 0.4;
  --p-opacity-50: 0.5;
  --p-opacity-60: 0.6;
  --p-opacity-70: 0.7;
  --p-opacity-80: 0.8;
  --p-opacity-90: 0.9;

  /* elevation — primitives (rule 3: prefer the semantics above) */
  --p-elevation-blur-1: 4px;
  --p-elevation-blur-2: 8px;
  --p-elevation-blur-3: 16px;
  --p-elevation-blur-4: 32px;
  --p-elevation-blur-5: 64px;
  --p-elevation-blur-6: 128px;
  --p-elevation-blur-7: 256px;
  --p-elevation-blur-8: 512px;
  --p-elevation-blur-none: 0;
  --p-elevation-spread-1: 0;
  --p-elevation-spread-2: -1px;
  --p-elevation-spread-3: -2px;
  --p-elevation-spread-4: -4px;
  --p-elevation-spread-none: 0;
  --p-elevation-y-1: 1px;
  --p-elevation-y-2: 4px;
  --p-elevation-y-3: 8px;
  --p-elevation-y-4: 16px;
  --p-elevation-y-none: 0;

  /* font — primitives (rule 3: prefer the semantics above) */
  --p-font-family-inter-tight: "Inter Tight", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --p-font-family-sofia-pro: "Sofia Pro Soft", "Inter Tight", system-ui, -apple-system, sans-serif;
  --p-font-line-height-loose: 17px;
  --p-font-line-height-none: 10px;
  --p-font-line-height-normal: 15px;
  --p-font-line-height-relaxed: 16.5px;
  --p-font-line-height-snug: 13.5px;
  --p-font-line-height-tight: 12px;
  --p-font-size-10: 10px;
  --p-font-size-12: 12px;
  --p-font-size-14: 14px;
  --p-font-size-16: 16px;
  --p-font-size-18: 18px;
  --p-font-size-20: 20px;
  --p-font-size-24: 24px;
  --p-font-size-28: 28px;
  --p-font-size-32: 32px;
  --p-font-size-40: 40px;
  --p-font-size-48: 48px;
  --p-font-size-56: 56px;
  --p-font-size-64: 64px;
  --p-font-tracking-normal: 0;
  --p-font-tracking-tight: -0.01px;
  --p-font-tracking-tighter: -0.04px;
  --p-font-tracking-wide: 0.09px;
  --p-font-tracking-wider: 0.25px;
  --p-font-tracking-widest: 0.49px;
  --p-font-weight-black: 1000;
  --p-font-weight-bold: 700;
  --p-font-weight-extrabold: 800;
  --p-font-weight-medium: 500;
  --p-font-weight-regular: 400;
  --p-font-weight-semibold: 600;

  /* layout — mobile, the default context */
  --breakpoint-min: 320px;
  --grid-columns: 4px;
  --grid-column-count: 4;
  --grid-content-max: 1344px;
  --grid-design-width: 375px;
  --grid-gutter: 16px;
  --grid-margin: 16px;
}

/* layout — tablet */
@media (min-width: 768px) {
  :root {
    --breakpoint-min: 768px;
    --grid-columns: 8px;
    --grid-column-count: 8;
    --grid-content-max: 1344px;
    --grid-design-width: 768px;
    --grid-gutter: 24px;
    --grid-margin: 24px;
  }
}

/* layout — desktop */
@media (min-width: 1024px) {
  :root {
    --breakpoint-min: 1024px;
    --grid-columns: 12px;
    --grid-column-count: 12;
    --grid-content-max: 1344px;
    --grid-design-width: 1024px;
    --grid-gutter: 24px;
    --grid-margin: 32px;
  }
}

/* layout — large */
@media (min-width: 1440px) {
  :root {
    --breakpoint-min: 1440px;
    --grid-columns: 12px;
    --grid-column-count: 12;
    --grid-content-max: 1344px;
    --grid-design-width: 1440px;
    --grid-gutter: 24px;
    --grid-margin: 32px;
  }
}