@layer tokens {
  :root {
    color-scheme: dark;

    --accent: #0a84ff;
    --accent-strong: #64d2ff;
    --accent-rgb: 10, 132, 255;

    /* Apple-inspired product hierarchy: content, grouped surfaces, functional chrome. */
    --mf-color-bg: #000000;
    --mf-color-sidebar: #161617;
    --mf-color-bg-elevated: #161617;
    --mf-color-panel: #1c1c1e;
    --mf-color-panel-raised: #2c2c2e;
    --mf-color-input: #232325;
    --mf-border-width: 1px;
    --mf-border-style: solid;
    --mf-color-border-light: #e8e8e8;
    --mf-color-border-dark: #3c3c3e;
    --mf-color-sidebar-divider: var(--mf-color-border-dark);
    --mf-color-border: var(--mf-color-border-dark);
    --mf-color-border-subtle: var(--mf-color-border);
    --mf-color-border-strong: rgb(var(--accent-rgb, 126, 207, 152), 0.38);
    --mf-color-primary: var(--mf-color-accent);
    --mf-color-text: #f5f5f7;
    --mf-color-muted: #a1a1a6;
    --mf-color-subtle: #86868b;
    --mf-color-control-selected: var(--mf-color-text);
    --mf-color-on-control-selected: #1d1d1f;
    --mf-segmented-background: #2c2c2e;
    --mf-segmented-border: #545458;
    --mf-segmented-hover: #3a3a3c;
    --mf-segmented-text: #a1a1a6;
    --mf-segmented-selected: #f5f5f7;
    --mf-segmented-selected-text: #1d1d1f;
    --mf-color-highlight: rgb(255 255 255 / 8%);
    --mf-glass-chrome-background: rgb(28 28 30 / 78%);
    --mf-glass-chrome-background-strong: rgb(28 28 30 / 88%);
    --mf-glass-chrome-border: var(--mf-color-border);
    --mf-glass-chrome-highlight: rgb(255 255 255 / 10%);
    --mf-glass-edge-highlight: rgb(255 255 255 / 76%);
    --mf-glass-edge-reflection: rgb(255 255 255 / 52%);
    --mf-glass-control-light-background:
      radial-gradient(circle at 32% 24%, rgb(255 255 255 / 30%), transparent 56%), rgb(255 255 255 / 18%);
    --mf-glass-control-clear-background: radial-gradient(circle at 32% 24%, rgb(255 255 255 / 8%), transparent 56%), rgb(255 255 255 / 4%);
    --mf-glass-control-light-border: rgb(255 255 255 / 64%);
    --mf-glass-control-light-shadow:
      inset -3px -3px 8px rgb(255 255 255 / 10%), inset 3px 3px 9px rgb(0 0 0 / 7%), -3px -3px 10px rgb(255 255 255 / 18%),
      3px 4px 12px rgb(0 0 0 / 10%);
    --mf-glass-control-light-filter: blur(18px) saturate(1.28);
    --mf-glass-control-light-ink: #1d1d1f;
    --mf-glass-control-light-opaque: #ffffff;
    --mf-glass-control-dark-background: radial-gradient(circle at 32% 24%, rgb(255 255 255 / 7%), transparent 56%), rgb(12 18 26 / 20%);
    --mf-glass-control-dark-border: rgb(255 255 255 / 22%);
    --mf-glass-control-dark-shadow:
      inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 -1px 0 rgb(0 0 0 / 16%), 0 0 0 0.5px rgb(0 0 0 / 24%), 0 4px 12px rgb(0 0 0 / 16%);
    --mf-glass-control-dark-filter: blur(18px) saturate(1.18) brightness(0.98);
    --mf-glass-control-dark-ink: #ffffff;
    --mf-glass-control-dark-opaque: #1c1c1e;
    --mf-glass-control-background: var(--mf-glass-control-dark-background);
    --mf-glass-control-border: var(--mf-glass-control-dark-border);
    --mf-glass-control-shadow: var(--mf-glass-control-dark-shadow);
    --mf-glass-control-filter: var(--mf-glass-control-dark-filter);
    --mf-auth-accent: #0071e3;
    --mf-auth-ink: #1d1d1f;
    --mf-auth-muted: #6e6e73;
    --mf-auth-page: #f5f5f7;
    --mf-auth-page-start: #ffffff;
    --mf-auth-page-end: #ececf1;
    --mf-auth-surface: #ffffff;
    --mf-auth-logo-background: #1d1d1f;
    --mf-auth-logo-mark: #a7d8ff;
    --mf-auth-brand-shadow: none;
    --mf-auth-logo-shadow: none;
    --mf-auth-header-surface: #111318;
    --mf-auth-header-surface-deep: #050608;
    --mf-auth-header-ink: #f5f5f7;
    --mf-auth-header-muted: #a1a1a6;
    --mf-auth-header-accent: #64d2ff;
    --mf-auth-card-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 36px 100px rgb(22 40 70 / 18%);
    --mf-color-accent: var(--accent, #0a84ff);
    --mf-color-accent-strong: var(--accent-strong, #64d2ff);
    --mf-color-on-accent: #ffffff;
    --mf-color-avatar-text: #ffffff;
    --mf-color-on-danger: #ffffff;
    --mf-color-danger: #ff453a;
    --mf-color-danger-rgb: 255 69 58;
    --mf-color-warning: #e5b96f;
    --mf-color-warning-rgb: 229 185 111;
    --mf-color-info: #64d2ff;
    --mf-color-info-rgb: 100 210 255;
    --mf-color-success: #30d158;
    --mf-color-success-rgb: 48 209 88;
    --mf-accent-teal: #56c7bd;
    --mf-accent-blue: #7ba7e8;
    --mf-accent-orange: #e5a66f;
    --mf-accent-pink: #df8ab2;
    --mf-accent-purple: #aa8be8;
    --mf-accent-violet: #a695e6;
    --mf-accent-green: #7ecf98;
    --mf-color-exchange-binance: #f0b90b;
    --mf-color-exchange-bybit: #f6a500;
    --mf-color-exchange-kraken: #5741d9;
    --mf-color-exchange-coinbase: #0052ff;
    --mf-color-exchange-bitget: #00f0ff;
    --mf-color-asset-btc: #f7931a;
    --mf-color-asset-eth: #627eea;
    --mf-color-asset-eur-background: #165bb8;
    --mf-color-asset-eur-mark: #ffdd00;
    --mf-color-asset-xrp: #0b0b0b;
    --mf-color-asset-bnb: #f3ba2f;
    --mf-color-asset-bnb-mark: #181a20;
    --mf-color-asset-usdt: #26a17b;
    --mf-color-asset-usdc: #2775ca;
    --mf-color-asset-ada: #0033ad;
    --mf-color-asset-sol: #14f195;
    --mf-color-asset-sol-mark: #111111;
    --mf-color-asset-doge: #c2a633;
    --mf-color-asset-ltc: #345d9d;
    --mf-color-asset-link: #2a5ada;
    --mf-color-asset-mark-light: #ffffff;
    --mf-space-1: 4px;
    --mf-space-2: 8px;
    --mf-space-3: 12px;
    --mf-space-4: 16px;
    --mf-space-5: 20px;
    --mf-space-6: 24px;
    --mf-space-8: 32px;
    --mf-radius-card: 20px;
    --mf-radius-record: 14px;
    --mf-radius-compact: 9px;
    --mf-radius-control: 12px;
    --mf-radius-popover: 28px;
    --mf-radius-shell: 24px;
    --mf-radius-pill: 999px;
    --mf-radius-exchange-card: 18px;
    --mf-radius-exchange-focus: 16px;
    --mf-control-h-mobile: 36px;
    --mf-mobile-title-size: 34px;
    --mf-mobile-title-space: 52px;
    --mf-control-h-sm: 32px;
    --mf-control-h-md: 40px;
    --mf-action-card-max-width: 360px;
    --mf-row-h: 44px;
    --mf-kpi-h: 104px;
    --mf-sidebar-w: clamp(212px, 15.5vw, 252px);
    --mf-sidebar-rail-w: 72px;
    --mf-shell-inset: 12px;
    --mf-shell-inset-compact: clamp(8px, calc(0.588vw + 5.53px), 12px);
    --mf-topbar-h: 56px;
    --mf-page-max: 2020px;
    --mf-page-gap: clamp(12px, 0.85vw, 16px);
    --mf-page-pad-x: clamp(16px, 1.25vw, 32px);
    --mf-page-pad-top: clamp(14px, 1vw, 22px);
    --mf-page-pad-bottom: clamp(16px, 1.15vw, 26px);
    --mf-panel-pad: 16px;
    --mf-text-xs: clamp(11px, calc(10.4px + 0.08vw), 12px);
    --mf-text-sm: clamp(12px, calc(11px + 0.1vw), 13px);
    --mf-text-base: clamp(13px, calc(11.5px + 0.12vw), 14px);
    --mf-text-title: clamp(16px, calc(13px + 0.2vw), 20px);
    --mf-text-page-title: clamp(25px, calc(19px + 0.38vw), 34px);
    --mf-text-metric: clamp(22px, calc(15px + 0.4vw), 31px);
    --mf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --mf-shadow-panel: none;
    --mf-shadow-shell: none;
    --mf-shadow-nav-active: none;
    --mf-shadow-control-highlight: none;
    --mf-shadow-progress-active: none;
    --mf-shadow-progress-dot: none;
    --mf-shadow-accent-edge: none;
    --mf-shadow-notification-pulse: none;
    --mf-shadow-success-pulse: none;
    --mf-shadow-timeline-marker: none;
    --mf-shadow-control-active: none;
    --mf-shadow-sticky-column: none;
    --mf-shadow-card: none;
    --mf-shadow-card-hover: none;
    --mf-shadow-panel-hover: none;
    --mf-shadow-exchange-card: none;
    --mf-shadow-exchange-card-hover: none;
    --mf-shadow-card-accent: none;
    --mf-shadow-logo: none;
    --mf-shadow-resource-hover: none;
    --mf-shadow-avatar: none;
    --mf-shadow-popover: none;
    --mf-surface-card-background: var(--mf-color-panel);
    --mf-widget-border: var(--mf-border-width) var(--mf-border-style) var(--mf-color-border);
    --mf-widget-border-light: var(--mf-border-width) var(--mf-border-style) var(--mf-color-border-light);
    --mf-widget-border-dark: var(--mf-border-width) var(--mf-border-style) var(--mf-color-border-dark);
    --mf-surface-card-border: var(--mf-widget-border);
    --mf-surface-card-radius: var(--mf-radius-card);
    --mf-surface-card-shadow: var(--mf-shadow-panel);
    --mf-surface-card-padding: var(--mf-panel-pad);
    --mf-focus: 0 0 0 4px rgb(var(--accent-rgb, 126, 207, 152), 0.3);
    --mf-focus-inset: inset 0 0 0 3px rgb(var(--accent-rgb, 126, 207, 152), 0.3);
    --mf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --mf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --mf-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --mf-overlay-gutter: 12px;

    /* Shared light surface tokens used by the public marketing variant. */
    --mf-marketing-page: #f5f5f7;
    --mf-marketing-surface: #ffffff;
    --mf-marketing-surface-raised: #fbfbfd;
    --mf-marketing-line: var(--mf-color-border-light);
    --mf-marketing-border: var(--mf-color-border-light);
    --mf-marketing-border-strong: rgb(0 113 227 / 32%);
    --mf-marketing-ink: #1d1d1f;
    --mf-marketing-muted: #6e6e73;
    --mf-marketing-accent: #0071e3;
    --mf-marketing-accent-strong: #0058b0;
    --mf-marketing-accent-bright: #2997ff;
    --mf-marketing-accent-soft: #e8f2ff;
    --mf-marketing-logo-middle: #5e5ce6;
    --mf-marketing-logo-end: #bf5af2;
    --mf-marketing-blue-soft: #edf6ff;
    --mf-marketing-on-accent: #ffffff;
    --mf-marketing-menu-surface-light: rgb(248 250 252 / 90%);
    --mf-marketing-menu-surface-dark: rgb(28 34 41 / 94%);
    --mf-marketing-success-rgb: 13 114 83;
    --mf-marketing-card-background: #ffffff;
    --mf-marketing-card-border: var(--mf-widget-border-light);
    --mf-marketing-card-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
    --mf-marketing-card-shadow-strong: none;
    --mf-marketing-card-radius: 32px;
    --mf-marketing-card-padding: 40px;
    --mf-marketing-card-padding-compact: 32px;
    --mf-marketing-card-padding-hero: 64px;
    --mf-marketing-dialog-shadow: var(--mf-marketing-card-shadow);
    --mf-marketing-focus: 0 0 0 4px rgb(0 113 227 / 26%);
    --mf-marketing-border-rule: var(--mf-border-width) var(--mf-border-style) var(--mf-marketing-line);
    --mf-marketing-dark-surface: #000000;
    --mf-marketing-dark-line: var(--mf-color-border-dark);
    --mf-marketing-dark-border-rule: var(--mf-border-width) var(--mf-border-style) var(--mf-marketing-dark-line);
    --mf-marketing-dark-ink: #f5f5f7;
  }

  html[data-theme="light"] {
    color-scheme: light;
    --mf-color-avatar-text: #ffffff;

    /* Neutral grouped surfaces shared with the public Apple-inspired edition. */
    --mf-color-bg: #f5f5f7;
    --mf-color-sidebar: #ffffff;
    --mf-color-bg-elevated: #e8e8ed;
    --mf-color-panel: #ffffff;
    --mf-color-panel-raised: #f5f5f7;
    --mf-color-input: #f5f5f7;
    --mf-color-sidebar-divider: var(--mf-color-border-light);
    --mf-color-border: var(--mf-color-border-light);
    --mf-color-border-subtle: var(--mf-color-border);
    --mf-color-border-strong: rgb(var(--accent-rgb, 63, 112, 77), 0.24);
    --mf-color-text: #1d1d1f;
    --mf-color-muted: #6e6e73;
    --mf-color-subtle: #86868b;
    --mf-color-control-selected: var(--mf-color-bg-elevated);
    --mf-color-on-control-selected: var(--mf-color-text);
    --mf-segmented-background: #e8e8ed;
    --mf-segmented-border: #c7c7cc;
    --mf-segmented-hover: #dedee3;
    --mf-segmented-text: #636366;
    --mf-segmented-selected: #ffffff;
    --mf-segmented-selected-text: #1d1d1f;
    --mf-color-highlight: rgb(255 255 255 / 92%);
    --mf-glass-chrome-background: rgb(255 255 255 / 72%);
    --mf-glass-chrome-background-strong: rgb(255 255 255 / 86%);
    --mf-glass-chrome-border: var(--mf-color-border);
    --mf-glass-chrome-highlight: rgb(255 255 255 / 92%);
    --mf-glass-edge-highlight: rgb(255 255 255 / 96%);
    --mf-glass-edge-reflection: rgb(255 255 255 / 76%);
    --mf-glass-control-background: var(--mf-glass-control-light-background);
    --mf-glass-control-border: var(--mf-glass-control-light-border);
    --mf-glass-control-shadow: var(--mf-glass-control-light-shadow);
    --mf-glass-control-filter: var(--mf-glass-control-light-filter);
    --mf-color-danger: #d70015;
    --mf-color-danger-rgb: 215 0 21;
    --mf-color-warning: #8a611f;
    --mf-color-warning-rgb: 138 97 31;
    --mf-color-info: #496fae;
    --mf-color-info-rgb: 73 111 174;
    --mf-color-success: #248a3d;
    --mf-color-success-rgb: 36 138 61;
    --mf-accent-teal: #2f7f79;
    --mf-accent-blue: #496fae;
    --mf-accent-green: #4f7d5b;
    --mf-accent-pink: #a95d82;
    --mf-accent-violet: #7161ad;
    --mf-shadow-panel: none;
    --mf-shadow-shell: none;
    --mf-shadow-control-active: none;
    --mf-shadow-card: none;
    --mf-shadow-card-hover: none;
    --mf-shadow-panel-hover: none;
    --mf-shadow-popover: none;
    --mf-surface-card-background: var(--mf-color-panel);
    --mf-surface-card-border: var(--mf-widget-border);
  }

  @media (max-width: 680px), (pointer: coarse) {
    :root {
      --mf-control-h-sm: 44px;
      --mf-control-h-md: 44px;
    }
  }

  @media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
    html[data-mobile-device="true"] {
      --mf-text-metric: clamp(22px, 5.5vw, 26px);
      --mf-text-page-title: clamp(18px, 5.2vw, 23px);
    }
  }
}