/* AFF Dating design tokens.
   Values mirror the iOS app (AFFClient/DesignSystem/Design.swift and the Me tab prototype),
   so the site and the code-built phone screens share one palette, type stack and motion. */
:root {
  /* Ink and surfaces */
  --ink: #000;
  --ink-900: #0a0a0a;
  --ink-800: #1b1c1c;
  --ink-700: #333;
  --ink-600: #4d4d4d;
  --ink-500: #6b6b6b; /* lightest grey used for site body copy (AA on white) */
  --ink-400: #8a8a8a; /* app secondary text: captions and section labels */
  --ink-300: #b5b5b5; /* chevrons */
  --line: #e3e3e3;
  --line-strong: #d4d4d4;
  --muted: #f5f5f5;
  --muted-2: #ededed;
  --paper: #fff;
  --premium: #0f0f0f;

  /* Signal colours (iOS system green / red, as in the app) */
  --online: #34c759;
  --like: #34c759;
  --pass: #ff3b30;
  --danger: #ff3b30;

  /* The app's only warm palette: chat */
  --blush: #f6d6c8;
  --chat-bg: #fbf9f8;
  --chat-line: #e4e2e2;

  /* On dark sections */
  --on-dark: #f5f5f5;
  --on-dark-2: rgba(255, 255, 255, 0.68);
  --on-dark-3: rgba(255, 255, 255, 0.44);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Type. Avenir Next is the app's text face; Apple devices render it locally. */
  --font-text: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape */
  --r-chip: 4px;
  --r-tile: 10px;
  --r-btn: 12px;
  --r-card: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-hero: 32px;
  --r-full: 999px;

  /* Motion: PressButton and the prototype's push curve */
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-push: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press-in: 100ms;
  --dur-press-out: 180ms;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;
  --section-y: clamp(72px, 10vw, 136px);

  --shadow-float: 0 18px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-device: 0 50px 90px rgba(0, 0, 0, 0.22), 0 12px 28px rgba(0, 0, 0, 0.12);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-h: 72px; }
}