/* MERXI Brand Foundations v1.5.1 — 2026-09-04 */
:root {
  /* Canvas and surface */
  --merxi-cloud: #fcfaf4;
  --merxi-pearl: #f4eddf;
  --merxi-mist: #eaf2f7;
  --merxi-white: #ffffff;

  /* Brand */
  --merxi-azure: #145bff;
  --merxi-cobalt: #0a3fb8;
  --merxi-aqua: #11bed0;
  --merxi-aqua-deep: #007c89;
  --merxi-gold: #d79b18;
  --merxi-gold-light: #fff2b1;
  --merxi-gold-deep: #b77908;
  --merxi-gold-text: #9a6200;
  --merxi-orange: #ff6a1a;
  --merxi-orange-light: #ffb11b;
  --merxi-orange-text: #9a3500;

  /* Content and state */
  --merxi-ink: #10233d;
  --merxi-muted: #516174;
  --merxi-line: #d9e0e6;
  --merxi-success: #007f67;
  --merxi-danger: #c83642;

  /* Semantic color roles. Product UI consumes this tier. */
  --merxi-color-bg-page: var(--merxi-cloud);
  --merxi-color-bg-surface: var(--merxi-white);
  --merxi-color-bg-raised: var(--merxi-white);
  --merxi-color-bg-sunken: var(--merxi-mist);
  --merxi-color-bg-tinted: var(--merxi-pearl);
  --merxi-color-bg-overlay: #10233d7a;
  --merxi-color-text-primary: var(--merxi-ink);
  --merxi-color-text-secondary: var(--merxi-muted);
  --merxi-color-text-disabled: #6b7886;
  --merxi-color-text-inverse: var(--merxi-white);
  --merxi-color-text-on-accent: var(--merxi-white);
  --merxi-color-border-subtle: #e7ddcc;
  --merxi-color-border-default: var(--merxi-line);
  --merxi-color-border-strong: #9ba9b8;
  --merxi-color-border-focus: var(--merxi-azure);
  --merxi-color-border-separator: var(--merxi-line);
  --merxi-color-accent-subtle: #e8efff;
  --merxi-color-accent-border: #83a8ff;
  --merxi-color-accent-solid: var(--merxi-azure);
  --merxi-color-accent-solid-hover: var(--merxi-cobalt);
  --merxi-color-accent-text: var(--merxi-cobalt);
  --merxi-color-status-live-bg: #e3fbfd;
  --merxi-color-status-live-border: #72dbe5;
  --merxi-color-status-live-solid: var(--merxi-aqua);
  --merxi-color-status-live-text: var(--merxi-aqua-deep);
  --merxi-color-status-suspended-bg: #eef1f3;
  --merxi-color-status-suspended-border: #c5cdd4;
  --merxi-color-status-suspended-text: var(--merxi-muted);
  --merxi-color-status-success-bg: #e7f7f2;
  --merxi-color-status-success-border: #75cdbb;
  --merxi-color-status-success-solid: var(--merxi-success);
  --merxi-color-status-success-text: #006453;
  --merxi-color-status-danger-bg: #fff0f1;
  --merxi-color-status-danger-border: #e59aa1;
  --merxi-color-status-danger-solid: var(--merxi-danger);
  --merxi-color-status-danger-text: #982933;
  --merxi-color-financial-gain: var(--merxi-success);
  --merxi-color-financial-loss: var(--merxi-danger);

  /* Backward-compatible role aliases. */
  --merxi-action: var(--merxi-azure);
  --merxi-action-hover: var(--merxi-cobalt);
  --merxi-action-foreground: var(--merxi-white);
  --merxi-value: var(--merxi-gold);
  --merxi-value-data: var(--merxi-gold-text);
  --merxi-value-foreground: var(--merxi-ink);
  --merxi-event: var(--merxi-orange);
  --merxi-event-data: var(--merxi-orange-text);
  --merxi-event-foreground: var(--merxi-ink);
  --merxi-live: var(--merxi-aqua);
  --merxi-live-data: var(--merxi-aqua-deep);
  --merxi-live-foreground: var(--merxi-ink);
  --merxi-focus: var(--merxi-azure);

  /* Gradients */
  --merxi-gradient-value: linear-gradient(
    105deg in oklab,
    #fff2b1 0%,
    #e3ae2d 52%,
    #b77908 100%
  );
  --merxi-gradient-signal: linear-gradient(
    105deg in oklab,
    #145bff 0%,
    #11bed0 100%
  );
  --merxi-gradient-event: linear-gradient(
    105deg in oklab,
    #ffb11b 0%,
    #ff6a1a 100%
  );
  --merxi-gradient-pearl: linear-gradient(
    105deg in oklab,
    #fcfaf4 0%,
    #f4eddf 100%
  );

  /* Production typography: the single MERXI web and product authority. */
  --merxi-font-display: 'Geist', sans-serif;
  --merxi-font-text: 'Geist', 'MiSans', 'PingFang SC', sans-serif;
  --merxi-font-data: 'IBM Plex Sans Condensed', 'Geist', sans-serif;
  --merxi-font-zh-hans: 'MiSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --merxi-font-zh-hant:
    'MiSans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --merxi-font-ko:
    'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
    sans-serif;
  --merxi-font-cjk: var(--merxi-font-zh-hans);
  --merxi-weight-regular: 400;
  --merxi-weight-medium: 500;
  --merxi-weight-semibold: 600;
  --merxi-weight-bold: 700;

  --merxi-type-size-label: 12px;
  --merxi-type-size-caption: 12px;
  --merxi-type-size-meta: 14px;
  --merxi-type-size-small: 14px;
  --merxi-type-size-control: 15px;
  --merxi-type-size-body: 16px;
  --merxi-type-size-lead: 18px;
  --merxi-type-size-body-large: 18px;
  --merxi-type-size-title: 20px;
  --merxi-type-size-title-mobile: 18px;
  --merxi-type-size-data-small: 24px;
  --merxi-type-size-heading-3: 28px;
  --merxi-type-size-heading-3-mobile: 24px;
  --merxi-type-size-data-medium: 32px;
  --merxi-type-size-heading-1-mobile: 36px;
  --merxi-type-size-heading-2: 40px;
  --merxi-type-size-heading-2-mobile: 30px;
  --merxi-type-size-data-large: 48px;
  --merxi-type-size-display-mobile: 44px;
  --merxi-type-size-hero-mobile: 52px;
  --merxi-type-size-heading-1: 56px;
  --merxi-type-size-score: 64px;
  --merxi-type-size-display: 72px;
  --merxi-type-size-hero: 96px;

  --merxi-type-line-label: 16px;
  --merxi-type-line-caption: 16px;
  --merxi-type-line-meta: 20px;
  --merxi-type-line-control: 20px;
  --merxi-type-line-small: 20px;
  --merxi-type-line-body: 24px;
  --merxi-type-line-lead: 28px;
  --merxi-type-line-title: 28px;
  --merxi-type-line-title-mobile: 24px;
  --merxi-type-line-data-small: 28px;
  --merxi-type-line-data-medium: 32px;
  --merxi-type-line-heading-3: 32px;
  --merxi-type-line-heading-3-mobile: 30px;
  --merxi-type-line-heading-1-mobile: 40px;
  --merxi-type-line-heading-2: 44px;
  --merxi-type-line-heading-2-mobile: 34px;
  --merxi-type-line-data-large: 48px;
  --merxi-type-line-display-mobile: 48px;
  --merxi-type-line-hero-mobile: 52px;
  --merxi-type-line-heading-1: 60px;
  --merxi-type-line-score: 64px;
  --merxi-type-line-display: 72px;
  --merxi-type-line-hero: 92px;

  --merxi-type-tracking-hero: -0.035em;
  --merxi-type-tracking-hero-mobile: -0.025em;
  --merxi-type-tracking-display: -0.03em;
  --merxi-type-tracking-display-mobile: -0.02em;
  --merxi-type-tracking-heading-1: -0.025em;
  --merxi-type-tracking-heading-2: -0.02em;
  --merxi-type-tracking-heading-3: -0.015em;
  --merxi-type-tracking-title: -0.01em;
  --merxi-type-tracking-lead: -0.005em;
  --merxi-type-tracking-body: 0;
  --merxi-type-tracking-live: 0.04em;
  --merxi-type-tracking-label: 0.06em;
  --merxi-type-tracking-wordmark-compact: 0.12em;
  --merxi-type-tracking-wordmark: 0.18em;

  /* 4-point spacing scale */
  --merxi-space-1: 4px;
  --merxi-space-2: 8px;
  --merxi-space-3: 12px;
  --merxi-space-4: 16px;
  --merxi-space-5: 20px;
  --merxi-space-6: 24px;
  --merxi-space-8: 32px;
  --merxi-space-10: 40px;
  --merxi-space-12: 48px;
  --merxi-space-16: 64px;
  --merxi-space-20: 80px;
  --merxi-space-24: 96px;
  --merxi-space-32: 128px;
  --merxi-space-40: 160px;

  /* Interaction */
  --merxi-target-min: 44px;
  --merxi-primary-mobile: 48px;
  --merxi-focus-ring-width: 3px;
  --merxi-focus-ring-offset: 3px;

  /* Shape and layout */
  --merxi-radius-sm: 6px;
  --merxi-radius-md: 10px;
  --merxi-radius-lg: 16px;
  --merxi-layout-content-max: 1280px;
  --merxi-layout-page-gutter-desktop: 80px;
  --merxi-layout-page-gutter-laptop: 48px;
  --merxi-layout-page-gutter-tablet: 32px;
  --merxi-layout-page-gutter-mobile: 20px;
  --merxi-layout-column-gap-desktop: 24px;
  --merxi-layout-column-gap-laptop: 24px;
  --merxi-layout-column-gap-tablet: 24px;
  --merxi-layout-column-gap-mobile: 16px;
  --merxi-layout-section-space-desktop: 128px;
  --merxi-layout-section-space-laptop: 96px;
  --merxi-layout-section-space-tablet: 96px;
  --merxi-layout-section-space-mobile: 72px;
  --merxi-layout-page-gutter: var(--merxi-layout-page-gutter-desktop);
  --merxi-layout-column-gap: var(--merxi-layout-column-gap-desktop);
  --merxi-layout-section-space: var(--merxi-layout-section-space-desktop);
  --merxi-layout-columns: 12;
}

.merxi-data {
  font-family: var(--merxi-font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    'tnum' 1,
    'lnum' 1;
}

.merxi-technical-id {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  font-feature-settings:
    'tnum' 1,
    'lnum' 1,
    'zero' 1;
}

.merxi-label {
  font-size: var(--merxi-type-size-label);
  font-weight: var(--merxi-weight-semibold);
  line-height: var(--merxi-type-line-label);
  letter-spacing: var(--merxi-type-tracking-label);
  text-transform: uppercase;
}

.merxi-caption {
  font-size: var(--merxi-type-size-caption);
  line-height: var(--merxi-type-line-caption);
}

.merxi-meta {
  font-size: var(--merxi-type-size-meta);
  line-height: var(--merxi-type-line-meta);
}

:lang(zh),
:lang(ko) {
  letter-spacing: 0;
  text-transform: none;
}

/* Supply the corresponding licensed font files in the consuming application. */
[lang]:lang(en) {
  font-family: var(--merxi-font-text);
}
:lang(zh) {
  font-family: var(--merxi-font-zh-hans);
}
:lang(zh-CN),
:lang(zh-Hans) {
  font-family: var(--merxi-font-zh-hans);
  line-break: strict;
}
:lang(zh-TW),
:lang(zh-HK),
:lang(zh-Hant) {
  font-family: var(--merxi-font-zh-hant);
  line-break: strict;
}
:lang(ko) {
  font-family: var(--merxi-font-ko);
  word-break: keep-all;
}
:is(:lang(zh), :lang(ko)).merxi-data {
  font-family: var(--merxi-font-data);
}

[data-financial-convention='red-up'] {
  --merxi-color-financial-gain: var(--merxi-danger);
  --merxi-color-financial-loss: var(--merxi-success);
}

@media (max-width: 1439px) {
  :root {
    --merxi-layout-page-gutter: var(--merxi-layout-page-gutter-laptop);
    --merxi-layout-column-gap: var(--merxi-layout-column-gap-laptop);
    --merxi-layout-section-space: var(--merxi-layout-section-space-laptop);
  }
}

@media (max-width: 1023px) {
  :root {
    --merxi-layout-page-gutter: var(--merxi-layout-page-gutter-tablet);
    --merxi-layout-column-gap: var(--merxi-layout-column-gap-tablet);
    --merxi-layout-section-space: var(--merxi-layout-section-space-tablet);
    --merxi-layout-columns: 8;
  }
}

@media (max-width: 767px) {
  :root {
    --merxi-layout-page-gutter: var(--merxi-layout-page-gutter-mobile);
    --merxi-layout-column-gap: var(--merxi-layout-column-gap-mobile);
    --merxi-layout-section-space: var(--merxi-layout-section-space-mobile);
    --merxi-layout-columns: 4;
  }
}