/**
 * EXFM design-system primitives.
 *
 * This theme ships static CSS, so these custom properties are the shared
 * contract between the homepage components and the legacy PremiumBox UI.
 * Keep component-specific declarations in their fm-*.css files.
 */
@layer fm.tokens, fm.base, fm.components, fm.utilities;

@layer fm.tokens {
  :root {
    /* Color tokens from the supplied Figma style guide.
    https://www.figma.com/design/fEsVq6XD25TQuBIfJScfko/EXFM-Web?node-id=1296-6590&t=ALo10G5kkFTUpOxC-0
     */
    --fm-primary-50: #f4ebff;
    --fm-primary-100: #e5e2ff;
    --fm-primary-200: #cdcbff;
    --fm-primary-300: #a77bf5;
    --fm-primary-400: #8a50ea;
    --fm-primary-500: #6929de;
    --fm-primary-600: #5719c7;
    --fm-primary-700: #4d13b6;
    --fm-primary-800: #3a0d8c;
    --fm-primary-900: #2b0a67;

    --fm-neutral-0: #ffffff;
    --fm-neutral-50: #f3f7fa;
    --fm-neutral-100: #f0f3f8;
    --fm-neutral-150: #dde1eb;
    --fm-neutral-200: #cbd0de;
    --fm-neutral-300: #808ba2;
    --fm-neutral-400: #6e6c7a;
    --fm-neutral-500: #636F8C;
    --fm-neutral-600: #616678;
    --fm-neutral-700: #4e5261;
    --fm-neutral-800: #111517;
    --fm-neutral-900: #06090e;
    --fm-dark: #000000;

    --fm-status-error: #ff0a36;
    --fm-status-warn: #F97000;
    --fm-status-success: #26a17b;
    --fm-status-error-2: #D80027;

    --fm-status-error-bg: #FF0A361A;
    --fm-status-warn-bg: #FF6C0A1A;
    --fm-status-success-bg: #26A17B1A;

    /* Input style guide: default, hover, focus, error, and disabled states. */
    --fm-input-height: 44px;
    --fm-input-padding-block: 10px;
    --fm-input-padding-inline: 16px;
    --fm-input-radius: 12px;
    --fm-input-radius-state: 12px;

    --fm-input-border-width: 1px;
    --fm-input-bg-default: var(--fm-neutral-0);
    --fm-input-bg-hover: var(--fm-neutral-0);
    --fm-input-bg-focus: var(--fm-neutral-0);
    --fm-input-bg-error: var(--fm-neutral-0);
    --fm-input-bg-disabled: var(--fm-neutral-100);
    --fm-input-border-default: var(--fm-neutral-100);
    --fm-input-border-hover: #d6bbfb;
    --fm-input-border-focus: #d6bbfb;
    --fm-input-border-error: var(--fm-status-error);
    --fm-input-border-disabled: var(--fm-neutral-200);
    --fm-input-text-default: var(--fm-neutral-800);
    --fm-input-text-disabled: var(--fm-neutral-300);
    --fm-input-placeholder: var(--fm-neutral-300);
    --fm-input-hint: var(--fm-neutral-500);
    --fm-input-error-text: var(--fm-status-error);
    --fm-input-focus-ring: rgba(105, 41, 222, 0.16);
    --fm-input-focus-shadow: 0 1px 2px rgba(16, 24, 40, 0.05),
      0 0 0 4px #f4ebff;

    /*
     * Button style guide.
     * Note: preserve state order: default, hover, click, disabled.
     */
    --fm-button-primary-bg-default: var(--fm-primary-500);
    --fm-button-primary-bg-hover: var(--fm-primary-600);
    --fm-button-primary-bg-click: var(--fm-primary-700);
    --fm-button-primary-bg-disabled: #352366;

    --fm-button-secondary-bg-default: #2a3138;
    --fm-button-secondary-bg-hover: #383f47;
    --fm-button-secondary-bg-click: #40474f;
    --fm-button-secondary-bg-disabled: #20262d;

    --fm-button-dark-bg-default: var(--fm-neutral-900);
    --fm-button-dark-bg-hover: #171c25;
    --fm-button-dark-bg-click: #242a36;
    --fm-button-dark-bg-disabled: #12171e;

    --fm-button-s-height: 36px;
    --fm-button-m-height: 48px;
    --fm-button-s-radius: 12px;
    --fm-button-dark-s-height: 48px;
    --fm-button-cta-l-height: 60px;
    --fm-button-cta-l-radius: 20px;
    --fm-button-cta-icon-l-height: 60px;
    --fm-button-cta-icon-l-radius: 20px;
    --fm-button-cta-icon-light-bg-default: var(--fm-neutral-0);
    --fm-button-cta-icon-light-bg-hover: var(--fm-neutral-50);
    --fm-button-cta-icon-light-bg-click: var(--fm-neutral-100);
    --fm-button-cta-icon-light-bg-disabled: var(--fm-neutral-200);
    --fm-button-cta-icon-light-text-default: var(--fm-neutral-900);
    --fm-button-cta-icon-light-text-disabled: var(--fm-neutral-400);

    /*
     * Alpha swatches
     */
    --fm-alpha-primary-glass-13: rgba(229, 226, 255, 0.13);
    --fm-alpha-primary-glass-10: rgba(229, 226, 255, 0.1);
    --fm-alpha-white-20: rgba(255, 255, 255, 0.2);
    --fm-alpha-white-07: rgba(255, 255, 255, 0.07);
    --fm-alpha-neutral-13: rgba(156, 166, 176, 0.13);

    /* Semantic surfaces and layout primitives. */
    --fm-bg: var(--fm-neutral-900);
    --fm-surface: rgba(8, 12, 19, 0.82);
    --fm-surface-soft: rgba(31, 42, 56, 0.84);
    --fm-surface-muted: rgba(46, 59, 75, 0.8);
    --fm-border: rgba(255, 255, 255, 0.08);
    --fm-text: var(--fm-neutral-0);
    --fm-text-muted: #a8afbd;
    --fm-text-faint: #707988;
    --fm-purple: var(--fm-primary-500);
    --fm-purple-bright: var(--fm-primary-400);
    --fm-radius-2xl: 32px;
    --fm-radius-lg: 20px;
    --fm-radius-md: 14px;
    --fm-radius-xl: 24px;
    --fm-radius-sm: 8px;
    --fm-radius-xs: 6px;
    --fm-radius-control: 0.75rem;
    --fm-radius-pill: 999px;
    --fm-blur-glass: 24px;
    --fm-blur-feature-card: 30px;
    --fm-activity-feature-gradient: linear-gradient(
      196.41deg,
      #a98cff 2.19%,
      #6929de 38.5%
    );
    /* --fm-activity-feature-gradient: linear-gradient(236.41deg, #A98CFF 26.19%, #6929DE 78.5%); */
    --fm-container: 1288px;
    --fm-header-height: 70px;
    --fm-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    --fm-font:
      Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      sans-serif;
    --fm-hero-font: 'Golos Text', Inter, system-ui, sans-serif;

    /* Typography tokens; Figma percentage tracking is represented as em. */
    --fm-type-display-hero: 500 38px/110% var(--fm-hero-font);
    --fm-type-display-hero-letter-spacing: -0.02em;
    --fm-type-display-section: 500 38px/130% var(--fm-hero-font);
    --fm-type-display-section-bold: 600 36px/140% var(--fm-hero-font);
    --fm-type-display-section-letter-spacing: -0.01em;
    --fm-type-heading-h1: 500 28px/140% var(--fm-hero-font);
    --fm-type-heading-h1-letter-spacing: 0;
    --fm-type-heading-h2: 500 24px/120% var(--fm-hero-font);
    --fm-type-heading-h2-letter-spacing: -0.01em;
    --fm-type-heading-h3: 500 18px/130% var(--fm-hero-font);
    --fm-type-heading-h3-letter-spacing: 0;
    --fm-type-numbers-display: 500 28px/110% var(--fm-hero-font);
    --fm-type-numbers-display-letter-spacing: -0.05em;
    --fm-type-body-l-regular: 400 16px/140% var(--fm-hero-font);
    --fm-type-body-l-regular-letter-spacing: -0.01em;
    --fm-type-body-l-medium: 500 16px/150% var(--fm-hero-font);
    --fm-type-body-l-medium-letter-spacing: -0.01em;
    --fm-type-body-m-regular: 400 15px/140% var(--fm-hero-font);
    --fm-type-body-m-regular-letter-spacing: -0.01em;
    --fm-type-body-m-medium: 500 15px/140% var(--fm-hero-font);
    --fm-type-body-m-medium-letter-spacing: -0.01em;
    --fm-type-body-s-regular: 400 14px/150% var(--fm-hero-font);
    --fm-type-body-s-regular-letter-spacing: -0.01em;
    --fm-type-caption-regular: 400 13px/140% var(--fm-hero-font);
    --fm-type-caption-regular-letter-spacing: -0.01em;
    --fm-type-caption-medium: 500 13px/150% var(--fm-hero-font);
    --fm-type-caption-medium-l: 500 20px/150% var(--fm-hero-font);
    --fm-type-caption-medium-letter-spacing: -0.01em;
    --fm-type-caption-xs-regular: 400 11px/16px var(--fm-hero-font);
    --fm-type-caption-xs-regular-letter-spacing: 0.1px;
    --fm-type-caption-xs-medium: 500 11px/20px var(--fm-hero-font);
    --fm-type-caption-xs-medium-letter-spacing: 0.1px;
    --fm-type-caption-xs-semibold: 600 11px/150% var(--fm-hero-font);
    --fm-type-caption-xs-semibold-letter-spacing: -0.01em;
    --fm-type-interface-l: 500 16px/150% var(--fm-font);
    --fm-type-interface-xl-regular: 400 18px var(--fm-font);
    --fm-type-interface-l-regular: 400 16px/150% var(--fm-font);
    --fm-type-interface-l-letter-spacing: -0.01em;
    --fm-type-interface-m: 500 15px/130% var(--fm-font);
    --fm-type-interface-m-letter-spacing: -0.02em;
    --fm-type-interface-s: 500 14px/150% var(--fm-font);
    --fm-type-interface-xs-regular: 400 12px/150% var(--fm-font);
    --fm-type-interface-s-letter-spacing: -0.01em;
    --fm-type-interface-nav: 400 14px/130% var(--fm-font);
    --fm-type-interface-nav-letter-spacing: -0.01em;
    --fm-type-interface-xs: 500 13px/150% var(--fm-font);
    --fm-type-interface-xs-letter-spacing: -0.01em;
  }
}

@layer fm.base {
  /* Base document and shared container defaults. */
  body.home {
    background: var(--fm-bg);
    color: var(--fm-text);
    font-family: var(--fm-font);
  }

  .fm-container {
    width: calc(100% - 2rem);
    max-width: var(--fm-container);
    margin-inline: auto;
  }
}

/* Global input helper text: match the Figma input style guide. */
body .js_window_wrap:not(.showed) > .info_window.js_window {
  display: block;
  visibility: hidden;
}

body .js_window_wrap.showed > .info_window.js_window {
  display: block;
  visibility: visible;
}

body .info_window.js_window {
  position: static;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--fm-input-hint);
  font: var(--fm-type-caption-xs-regular);
  letter-spacing: var(--fm-type-caption-xs-regular-letter-spacing);
  line-height: 16px;
  text-align: left;
  transition: none;
  z-index: auto;
}

body .info_window.js_window::before,
body .info_window.js_window .info_window_abs {
  display: none;
}

body .info_window.js_window .info_window_ins {
  width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
/* iPhone safe-area/browser chrome follows the first surface of each page family. */
html {
  background-color: var(--fm-neutral-0);
}

html:has(body.home),
html:has(body.fm-exchange-page-template),
html:has(body.fm-order-page-template),
html:has(body.fm-payment-page-template) {
  background-color: var(--fm-neutral-900);
}
body.home,
body.fm-exchange-page-template,
body.fm-order-page-template,
body.fm-payment-page-template {
  background-color: var(--fm-neutral-900);
}