/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/linear-ios/tokens.css
 * Reviewed against the source DESIGN.md on 2026-10-13.
 *
 * Fast issue tracker. Linear Purple #5E6AD2 on near-OLED #08090A, ultra-dense issue list, the Cmd+K command menu, cycle bars, drawn status iconography
 *
 * Extracted from awesome-ios-design-md (MIT, Copyright (c) 2026 Muhammed Eliwat).
 * Primary mode: dark. Sizes are iOS points mapped 1:1 to CSS px.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --bg: #08090A;
  --surface: #141516;
  --surface-warm: color-mix(in oklab, var(--surface), var(--fg) 6%);

  /* Foreground */
  --fg: #F7F8F8;
  --fg-2: color-mix(in oklab, var(--fg), var(--bg) 15%);
  --muted: #8A8F98;
  --meta: color-mix(in oklab, var(--muted), var(--bg) 25%);

  /* Border */
  --border: #23252A;
  --border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);

  /* Accent */
  --accent: #5E6AD2;
  --accent-on: #FFFFFF;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* Semantic */
  --success: #4CB782;
  --warn: #F2C94C;
  --danger: #EB5757;

  /* Typography — fonts */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Typography — type scale (from §3's hierarchy table) */
  --text-xs: 11px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 28px;
  --text-4xl: 36px;

  /* Typography — leading & tracking */
  --leading-body: 1.5;
  --leading-tight: 1.15;
  --tracking-display: -0.01em;

  /* Radius (from §4's corner radii) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Layout — a phone screen; desktop/tablet values only matter if a page is
   * stretched beyond one. */
  --section-y-desktop: 64px;
  --section-y-tablet: 40px;
  --section-y-phone: 24px;
  --container-max: 430px;
  --container-gutter-desktop: 16px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 16px;
}