@font-face {
  font-display: swap;
  font-family: "Stapel Semi Expanded";
  font-style: normal;
  font-weight: 900;
  src: url("../assets/fonts/stapel-semi-expanded-black.otf") format("opentype");
}

@font-face {
  font-display: swap;
  font-family: "Artegra Sans";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/ArtegraSans-Medium.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Artegra Sans Extended";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/ArtegraSansExSemiBold.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Artegra Sans Extended";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/ArtegraSansExBold.ttf") format("truetype");
}

:root {
  color-scheme: dark;

  /* Primitive colors from Figma global collection. */
  --seeto-color-black: #0a0a0b;
  --seeto-color-neutral-0: #ffffff;
  --seeto-color-neutral-25: #eceef1;
  --seeto-color-neutral-50: #d6d9de;
  --seeto-color-neutral-100: #b3b7be;
  --seeto-color-neutral-200: #8a9199;
  --seeto-color-neutral-300: #6b727a;
  --seeto-color-neutral-400: #4a4d52;
  --seeto-color-neutral-500: #3a3c40;
  --seeto-color-neutral-600: #2b2c2e;
  --seeto-color-neutral-700: #1e1e21;
  --seeto-color-neutral-800: #141415;
  --seeto-color-neutral-900: #0a0a0b;
  --seeto-color-accent-rose: #b72e3f;
  --seeto-color-accent-orange: #ff6a3d;
  --seeto-color-accent-cyan: #41cfd3;
  --seeto-color-accent-olive: #afb78c;
  --seeto-color-accent-sand: #bfa070;
  /* Brand color — logo only (Impulse variant on light backgrounds).
     Distinct from --seeto-color-accent-rose, which is the product's UI accent. */
  --seeto-color-brand-impulse-500: #e73052;
  --seeto-color-warm-graphite: #15100e;
  --seeto-color-warm-gray: #92887d;
  --seeto-color-cool-gray: #5c6167;
  --seeto-color-state-success: #66c889;
  --seeto-color-state-warning: #d4b16d;
  --seeto-color-state-error: #e75d71;
  --seeto-color-state-info: #5fb0df;

  /* Primitive spacing. */
  --seeto-space-0: 0;
  --seeto-space-1: 2px;
  --seeto-space-2: 4px;
  --seeto-space-3: 6px;
  --seeto-space-4: 8px;
  --seeto-space-5: 10px;
  --seeto-space-6: 12px;
  --seeto-space-8: 16px;
  --seeto-space-10: 20px;
  --seeto-space-12: 24px;
  --seeto-space-14: 28px;
  --seeto-space-16: 32px;
  --seeto-space-20: 40px;
  --seeto-space-24: 48px;
  --seeto-space-32: 64px;

  /* Primitive radii. */
  --seeto-radius-0: 0;
  --seeto-radius-1: 4px;
  --seeto-radius-2: 8px;
  --seeto-radius-3: 10px;
  --seeto-radius-4: 12px;
  --seeto-radius-5: 16px;
  --seeto-radius-6: 24px;
  --seeto-radius-7: 32px;
  --seeto-radius-pill: 999px;
  --seeto-radius-round: 50%;

  /* Primitive border widths. Kept explicit for Figma variable round-tripping. */
  --seeto-border-width-1: 1px;
  --seeto-border-width-2: 2px;

  /* Primitive sizes. */
  --seeto-size-phone: 393px;
  --seeto-size-touch-min: 44px;
  --seeto-size-icon-xs: 12px;
  --seeto-size-icon-sm: 16px;
  --seeto-size-icon-md: 20px;
  --seeto-size-icon-lg: 24px;
  --seeto-size-icon-xl: 32px;

  /* Primitive elevation and effects. */
  --seeto-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.26);
  --seeto-shadow-phone: 0 28px 90px rgba(0, 0, 0, 0.45);
  --seeto-shadow-action: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --seeto-blur-glass-sm: 4.45px;
  --seeto-blur-glass-md: 10px;
  --seeto-blur-glass-lg: 12px;

  /* Primitive motion. */
  --seeto-motion-instant: 80ms;
  --seeto-motion-fast: 180ms;
  --seeto-motion-base: 300ms;
  --seeto-motion-slow: 680ms;
  --seeto-motion-spring-duration: 1000ms;
  --seeto-motion-ease-standard: cubic-bezier(0.2, 0.85, 0.25, 1);
  --seeto-motion-ease-emphasized: cubic-bezier(0.38, 0.07, 0.35, 0.3);
  --seeto-motion-ease-slider: cubic-bezier(0.65, 0, 0.35, 1);

  /* Primitive layout. */
  --seeto-breakpoint-phone: 393px;
  --seeto-breakpoint-tablet: 720px;
  --seeto-z-base: 0;
  --seeto-z-content: 10;
  --seeto-z-navigation: 20;
  --seeto-z-menu: 30;
  --seeto-z-modal: 45;
  --seeto-z-overlay: 70;

  /* Typography foundations. */
  --seeto-font-ui: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --seeto-font-display: "Stapel Semi Expanded", Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  /* SEETO/Type/Body/… resolves through this Artegra Sans Medium stack. */
  --seeto-font-card: "Artegra Sans", Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --seeto-font-card-extended: "Artegra Sans Extended", Manrope, Inter, ui-sans-serif, system-ui, sans-serif;

  /* Figma font-style names used by the typography variable bridge. */
  --seeto-font-style-regular: "Regular";
  --seeto-font-style-medium: "Medium";
  --seeto-font-style-semibold: "SemiBold";
  --seeto-font-style-bold: "Bold";

  --seeto-type-display-hero-size: 64px;
  --seeto-type-display-hero-line: 68px;
  --seeto-type-display-title-size: 44px;
  --seeto-type-display-title-line: 48px;
  --seeto-type-heading-1-size: 32px;
  --seeto-type-heading-1-line: 38px;
  --seeto-type-heading-2-size: 24px;
  --seeto-type-heading-2-line: 30px;
  --seeto-type-card-title-size: 22px;
  --seeto-type-card-title-line: 1.1;
  --seeto-type-card-title-compact-size: 18px;
  --seeto-type-card-title-compact-line: 1.08;
  --seeto-type-body-large-size: 18px;
  --seeto-type-body-large-line: 28px;
  --seeto-type-body-base-size: 16px;
  --seeto-type-body-base-line: 24px;
  --seeto-type-body-small-size: 14px;
  --seeto-type-body-small-line: 20px;
  --seeto-type-label-size: 14px;
  --seeto-type-label-line: 18px;
  --seeto-type-caption-size: 12px;
  --seeto-type-caption-line: 12px;
  --seeto-type-letter-spacing-0: 0;

  /* Semantic colors. */
  --seeto-bg-base: var(--seeto-color-neutral-900);
  --seeto-bg-surface-1: var(--seeto-color-neutral-800);
  --seeto-bg-surface-2: var(--seeto-color-neutral-700);
  --seeto-bg-surface-3: var(--seeto-color-neutral-600);
  --seeto-bg-surface-4: var(--seeto-color-neutral-500);
  --seeto-bg-surface-light: var(--seeto-color-neutral-25);
  --seeto-bg-card-default: var(--seeto-color-neutral-700);
  --seeto-bg-card-muted: var(--seeto-color-neutral-800);
  --seeto-bg-card-elevated: var(--seeto-color-neutral-600);
  --seeto-bg-overlay-soft: rgba(10, 10, 11, 0.36);
  --seeto-bg-overlay-strong: rgba(10, 10, 11, 0.56);
  --seeto-bg-panel-glass: rgba(10, 10, 11, 0.7);

  --seeto-text-primary: var(--seeto-color-neutral-0);
  --seeto-text-secondary: var(--seeto-color-neutral-100);
  --seeto-text-tertiary: var(--seeto-color-neutral-300);
  --seeto-text-muted: var(--seeto-color-neutral-400);
  --seeto-text-on-light: var(--seeto-color-neutral-900);
  --seeto-text-on-warm: var(--seeto-color-warm-graphite);
  --seeto-text-accent: var(--seeto-color-accent-rose);

  --seeto-icon-primary: var(--seeto-color-neutral-0);
  --seeto-icon-secondary: var(--seeto-color-neutral-100);
  --seeto-icon-muted: var(--seeto-color-neutral-400);
  --seeto-icon-on-light: var(--seeto-color-neutral-900);

  --seeto-border-default: rgba(255, 255, 255, 0.2);
  --seeto-border-soft: rgba(255, 255, 255, 0.12);
  --seeto-border-strong: rgba(255, 255, 255, 0.34);
  --seeto-border-on-light: rgba(10, 10, 11, 0.12);
  --seeto-border-accent: var(--seeto-color-accent-rose);
  --seeto-focus-ring: var(--seeto-color-neutral-0);

  --seeto-action-primary-bg: var(--seeto-color-accent-rose);
  --seeto-action-primary-bg-hover: #c73b4e;
  --seeto-action-primary-bg-active: #9f2435;
  --seeto-action-primary-text: var(--seeto-color-neutral-0);
  --seeto-action-secondary-bg: var(--seeto-color-neutral-700);
  --seeto-action-secondary-text: var(--seeto-color-neutral-0);
  --seeto-action-alt-bg: var(--seeto-color-accent-orange);
  --seeto-action-alt-text: var(--seeto-color-warm-graphite);
  --seeto-action-disabled-bg: var(--seeto-color-neutral-500);
  --seeto-action-disabled-text: var(--seeto-color-neutral-100);
  --seeto-action-disabled-opacity: 0.72;

  --seeto-chip-bg: var(--seeto-color-neutral-800);
  --seeto-chip-text: var(--seeto-color-neutral-100);
  --seeto-chip-border: var(--seeto-color-neutral-600);
  --seeto-chip-active-bg: var(--seeto-color-accent-rose);
  --seeto-chip-active-text: var(--seeto-color-neutral-0);

  --seeto-input-bg: var(--seeto-color-neutral-800);
  --seeto-input-text: var(--seeto-color-neutral-0);
  --seeto-input-placeholder: var(--seeto-color-neutral-300);
  --seeto-input-border: var(--seeto-color-neutral-600);
  --seeto-input-focus: var(--seeto-color-accent-rose);

  --seeto-link-default: #2c9bd0;
  --seeto-link-hover: #4cb7e8;
  --seeto-link-visited: #7f5cd6;

  /* Component tokens. */
  --seeto-button-height-small: 34px;
  --seeto-button-height-medium: 44px;
  --seeto-button-height-large: 52px;
  --seeto-button-padding-x-small: 16px;
  --seeto-button-padding-x-medium: 18px;
  --seeto-button-padding-x-large: 24px;
  --seeto-phone-width: var(--seeto-size-phone);
  --seeto-card-radius: var(--seeto-radius-7);
  --seeto-card-shadow: var(--seeto-shadow-card);
  --seeto-card-action-size: 46px;
  --seeto-card-action-radius: var(--seeto-radius-6);
  --seeto-card-content-height: 206px;
  --seeto-card-footer-height: 82px;
  --seeto-feed-edge-padding: var(--seeto-space-6);
  --seeto-card-padding: var(--seeto-space-12);
  --seeto-card-title-font: var(--seeto-font-display);
  --seeto-date-badge-radius: 16px 16px 4px;
  --seeto-date-badge-min-width: 59px;
  --seeto-date-badge-padding: 6px 8px;
  --seeto-main-menu-width: 324px;
  --seeto-main-menu-primary-width: 249px;
  --seeto-main-menu-club-width: 69px;
  --seeto-main-menu-height: 60px;
  --seeto-main-menu-radius: 296px;
  --seeto-modal-top-offset: calc(max(6px, env(safe-area-inset-top, 0px)) + 80px);

  /* Legacy aliases consumed by the existing page. */
  --black: var(--seeto-bg-base);
  --text: var(--seeto-text-primary);
  --secondary: var(--seeto-text-secondary);
  --warm-gray: var(--seeto-color-warm-gray);
  --neutral-400: var(--seeto-color-neutral-400);
  --rose: var(--seeto-color-accent-rose);
  --orange: var(--seeto-color-accent-orange);
  --cyan: var(--seeto-color-accent-cyan);
  --olive: var(--seeto-color-accent-olive);
  --sand: var(--seeto-color-accent-sand);
  --panel: var(--seeto-bg-panel-glass);
  --border: var(--seeto-border-default);
  --phone-width: var(--seeto-phone-width);
  --font-accent: var(--seeto-font-display);
  --font-card: var(--seeto-font-card);
  --font-card-extended: var(--seeto-font-card-extended);
  --seeto-spring-duration: var(--seeto-motion-spring-duration);
  --seeto-spring-ease: var(--seeto-motion-ease-emphasized);
}