/* Hintr design tokens — distilled from DESIGN.md (Apple-inspired)
   SF Pro replaced with Inter + system stack for legal web use. */

:root {
  /* ─── Color: Primary ─────────────────────────────── */
  --c-black:        #000000;
  --c-ink:          #1d1d1f;
  --c-light:        #f5f5f7;
  --c-white:        #ffffff;

  /* ─── Color: Accent (mono — black on light, no blue) ─ */
  --c-accent:        #000000;   /* primary CTA fill */
  --c-accent-hover:  #1d1d1f;   /* hover: ink */
  --c-accent-soft:   rgba(0, 0, 0, 0.05); /* icon bg, subtle fills */

  /* ─── Color: Graphite surfaces (dark scenes) ─────── */
  --c-graphite-1:   #272729;
  --c-graphite-2:   #28282b;
  --c-graphite-3:   #2a2a2c;
  --c-graphite-4:   #1d1d1f;

  /* ─── Color: Text on light ───────────────────────── */
  --c-text:         #1d1d1f;
  --c-text-muted:   #6e6e73;
  --c-text-faint:   #86868b;
  --c-divider:      #d2d2d7;

  /* ─── Color: Text on dark ────────────────────────── */
  --c-text-on-dark:        #f5f5f7;
  --c-text-on-dark-muted:  #a1a1a6;
  --c-divider-on-dark:     #424245;

  /* ─── Color: Status ──────────────────────────────── */
  --c-success:      #29a745;
  --c-warning:      #ff9f0a;
  --c-error:        #ff3b30;

  /* ─── Typography ─────────────────────────────────── */
  /* SF Pro is Apple-licensed; we fall back to Inter (self-hosted)
     and system-ui so Apple devices still get SF Pro natively. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Inter var", "Inter", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Inter var", "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono",
                  Menlo, Monaco, Consolas, monospace;

  /* Type scale (px → rem at 16px root) */
  --fs-12:   0.75rem;
  --fs-14:   0.875rem;
  --fs-17:   1.0625rem;
  --fs-21:   1.3125rem;
  --fs-28:   1.75rem;
  --fs-40:   2.5rem;
  --fs-56:   3.5rem;
  --fs-80:   5rem;
  --fs-112:  7rem;

  /* Line heights — tight for headlines, generous for body */
  --lh-tight:  1.05;
  --lh-snug:   1.15;
  --lh-body:   1.47;
  --lh-loose:  1.6;

  /* Letter spacing — Apple uses negative tracking on display */
  --ls-display: -0.025em;
  --ls-tight:   -0.015em;
  --ls-normal:  -0.005em;
  --ls-wide:    0.02em;

  /* Weights — Apple display tends to semibold/bold; text stays regular */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── Geometry ───────────────────────────────────── */
  --r-sm:    6px;
  --r-md:    12px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-pill:  980px;

  /* Section vertical rhythm */
  --section-y-mobile:   72px;
  --section-y-desktop:  120px;

  /* Container widths */
  --container-narrow:   720px;
  --container-default:  980px;
  --container-wide:     1200px;

  /* ─── Motion ─────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;

  /* ─── Elevation (used sparingly per DESIGN.md) ───── */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* ─── Z-index ────────────────────────────────────── */
  --z-nav:    50;
  --z-modal:  100;
  --z-toast:  150;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}