/*
 * Physique design tokens for hosted web pages.
 *
 * Mirrors, by name, the iOS app's design system. The Swift files are the source of truth:
 *   MeasureMe/MeasureMe/DesignSystem/Tokens/MeasureColors.swift      (--measure-<name>)
 *   MeasureMe/MeasureMe/DesignSystem/Tokens/MeasureTypography.swift  (--measure-type-*, --measure-font-*)
 *   MeasureMe/MeasureMe/DesignSystem/Tokens/MeasureSpacing.swift     (--measure-spacing-*, --measure-radius-*)
 * Swift camelCase maps to kebab-case: measureTextPrimary -> --measure-text-primary.
 * When a Swift token changes, change it here in the same PR. New pages link this file first, then their own CSS.
 *
 * The app is dark-only, so the pages are too: no light palette, no prefers-color-scheme switching.
 * DM Mono is the app's bundled font, self-hosted here (SIL OFL, see fonts/OFL.txt). No third-party font host.
 */

@font-face {
  font-family: "DM Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/DMMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Mono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/DMMono-Medium.ttf") format("truetype");
}

:root {
  color-scheme: dark;

  /* MeasureColors: surfaces */
  --measure-background: #0a0a0f;
  --measure-surface: #13131a;
  --measure-surface-2: #1c1c26;
  --measure-surface-3: #252532;

  /* MeasureColors: text */
  --measure-text-primary: #f0f0f5;
  --measure-text-secondary: #9898aa;
  --measure-text-tertiary: #5a5a6e; /* below 4.5:1 on every surface: disabled or decorative only, never required text */
  --measure-text-meta: #3a3a50; /* decorative only */

  /* MeasureColors: accent and semantic */
  --measure-accent: #c8f45c;
  --measure-coral: #ff6b6b;

  /* MeasureColors: borders */
  --measure-border-default: rgba(255, 255, 255, 0.07);
  --measure-border-emphasis: rgba(255, 255, 255, 0.13);

  /* MeasureColors: lime opacity ladder */
  --measure-accent-tint-004: rgba(200, 244, 92, 0.04);
  --measure-accent-tint-006: rgba(200, 244, 92, 0.06);
  --measure-accent-tint-012: rgba(200, 244, 92, 0.12);
  --measure-accent-tint-020: rgba(200, 244, 92, 0.2);
  --measure-accent-tint-060: rgba(200, 244, 92, 0.6);

  /* MeasureColors: overlays */
  --measure-scrim: rgba(0, 0, 0, 0.65);

  /* MeasureColors: on-accent (text and marks on lime) */
  --measure-on-accent-primary: var(--measure-background);
  --measure-on-accent-secondary: rgba(0, 0, 0, 0.45);
  --measure-on-accent-tertiary: rgba(0, 0, 0, 0.6);

  /* MeasureColors: delta chip backgrounds */
  --measure-delta-positive-background: rgba(200, 244, 92, 0.1);
  --measure-delta-negative-background: rgba(255, 107, 107, 0.1);

  /* MeasureSpacing */
  --measure-spacing-xxs: 4px;
  --measure-spacing-xs: 6px;
  --measure-spacing-sm: 8px;
  --measure-spacing-md: 12px;
  --measure-spacing-touch-target: 44px;

  /* MeasureRadius */
  --measure-radius-sm: 8px;
  --measure-radius-icon-button: 11px;
  --measure-radius-chip: 5px;
  --measure-radius-card: 10px;
  --measure-radius-hero: 20px;

  /* MeasureTypography: families. The app uses the system font (SF Pro) for UI and DM Mono for values. */
  --measure-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --measure-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* MeasureTypography: text styles (size, weight). Web floor for readable copy is 12px (the app's 9 and 10 pt labels are not used on web). */
  --measure-type-detail-title-size: 28px; /* detailTitle: 28 bold */
  --measure-type-detail-title-weight: 700;
  --measure-type-screen-title-size: 22px; /* screenTitle: 22 semibold */
  --measure-type-screen-title-weight: 600;
  --measure-type-modal-title-size: 16px; /* modalTitle: 16 semibold */
  --measure-type-modal-title-weight: 600;
  --measure-type-body-size: 15px; /* body: 15 regular */
  --measure-type-body-weight: 400;
  --measure-type-screen-subtitle-size: 13px; /* screenSubtitle: 13 regular */
  --measure-type-screen-subtitle-weight: 400;
  --measure-type-action-size: 14px; /* action: 14 regular, actionEmphasis: 14 semibold */
  --measure-type-action-weight: 400;
  --measure-type-action-emphasis-weight: 600;
  --measure-type-row-label-size: 12px; /* rowLabel: 12 medium */
  --measure-type-row-label-weight: 500;
  --measure-type-mono-body-size: 13px; /* monoBody: DM Mono 13 medium */
  --measure-type-mono-body-weight: 500;
  --measure-type-mono-caption-size: 11px; /* monoCaption: DM Mono 11 regular */
  --measure-type-mono-caption-weight: 400;
}