/* Tennisor design tokens — mirror of docs/designs/design-system.html
   Keep in sync. If a token diverges between site and design system, fix the site. */

:root {
  /* ── Brand background ─────────────────────────────────────── */
  --bg-page:        #F2F2F7;   /* iOS systemGroupedBackground — site default */
  --bg-cream:       #FAF7F0;   /* warm cream — hero + documentary */
  --bg-card:        #FFFFFF;
  --bg-card-end:    #FBFBFD;
  --bg-dark:        #0F2419;   /* deep forest — used for inverted sections */

  /* ── Ink / text ───────────────────────────────────────────── */
  --ink:            #1A3527;   /* primary text */
  --ink-soft:       #4A6051;   /* secondary text */
  --ink-faint:      #8E8E93;   /* tertiary / iOS gray */
  --ink-on-dark:    #F2EDE1;
  --ios-blue:       #007AFF;

  /* ── Accent — olive (used sparingly) ──────────────────────── */
  --olive:          #94B83A;
  --olive-deep:     #6F8B22;
  --olive-soft:     rgba(148, 184, 58, 0.10);
  --olive-fill:     rgba(148, 184, 58, 0.22);
  --olive-line:     rgba(148, 184, 58, 0.90);
  --olive-glow:     rgba(148, 184, 58, 0.05);

  /* ── Dividers / borders ───────────────────────────────────── */
  --hairline:       rgba(0, 0, 0, 0.06);
  --hairline-x:     rgba(0, 0, 0, 0.10);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-hero:    0 8px 28px rgba(0, 0, 0, 0.06),
                    0 1px 0 rgba(255, 255, 255, 1) inset,
                    0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card:    0 4px 16px rgba(0, 0, 0, 0.04),
                    0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-large:   0 24px 60px rgba(15, 36, 25, 0.10),
                    0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ── Radii (enumerated — never use intermediate values) ───── */
  --r-pill:         100px;
  --r-xl:           40px;
  --r-lg:           28px;
  --r-md:           22px;
  --r-card:         18px;
  --r-inner:        14px;
  --r-chip:         12px;
  --r-dot:          4px;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-sans:      -apple-system, "SF Pro Display", "PingFang SC", system-ui, sans-serif;
  --font-mono:      "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ── Layout ───────────────────────────────────────────────── */
  --container:      min(1200px, calc(100% - 48px));
  --container-wide: min(1400px, calc(100% - 32px));
  --gutter:         24px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.2, 0.7, 0.4, 1);
  --ease-spring:    cubic-bezier(0.3, 0.7, 0.4, 1);
  --t-quick:        160ms;
  --t-cinematic:    600ms;
}