/* ==========================================================================
   Apple design language - consolidated tokens
   FlagshipIndex B. Light is the default; dark applies when
   documentElement[data-theme="dark"] is set by the no-flash head script.
   ========================================================================== */

:root {
  /* Surfaces */
  --canvas: #ffffff;
  --canvas-alt: #f5f5f7;
  --fill: #767680;
  --fill-2: #f5f5f7;
  --elevated: rgba(255, 255, 255, 0.72);

  /* Ink / text */
  --ink: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --text-on-ink: #ffffff;
  --text-on-accent: #ffffff;

  /* Action */
  --accent: #0066cc;
  --accent-hover: #0071e3;
  --link: #0066cc;

  /* Neutral primary button (Apple's ink button) */
  --ink-btn: #1d1d1f;
  --ink-btn-hover: #000000;
  --ink-btn-text: #ffffff;

  /* Secondary accent badge - Mondo Orange, at most one per viewport */
  --orange: #ff6a13;

  /* Hairline borders (1px) */
  --hairline: #e8e8ed;
  --hairline-strong: #d2d2d7;

  /* Focus */
  --focus: #0066cc;

  /* Typography - Apple system stack */
  --apple-font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --apple-font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
    monospace;

  /* Continuous corner radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.32, 0.36, 0, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  --canvas: #000000;
  --canvas-alt: #1c1c1e;
  --fill: #98989d;
  --fill-2: #1c1c1e;
  --elevated: rgba(22, 22, 23, 0.8);

  --ink: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #86868b;
  --text-on-ink: #1d1d1f;
  --text-on-accent: #ffffff;

  --accent: #2997ff;
  --accent-hover: #3ea7ff;
  --link: #2997ff;

  --ink-btn: #f5f5f7;
  --ink-btn-hover: #ffffff;
  --ink-btn-text: #1d1d1f;

  --orange: #ff8a45;

  --hairline: rgba(255, 255, 255, 0.15);
  --hairline-strong: rgba(255, 255, 255, 0.24);

  --focus: #2997ff;

  color-scheme: dark;
}

/* Tabular numerals for every price and money figure. */
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-starting-style],
  [data-ending-style] {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .translucent {
    background: var(--canvas) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hairline: #d2d2d7;
    --hairline-strong: #a09fa8;
    --text-secondary: #515153;
    --text-tertiary: #646468;
  }
  :root[data-theme="dark"] {
    --hairline: #3a3a3c;
    --hairline-strong: #6e6e73;
    --text-secondary: #c7c7cc;
    --text-tertiary: #a1a1a6;
  }
}