/* ff.tossas.ai — design tokens v3 "quiet" (2026-10-17). Supersedes v1 and v2.
   Chrome is monochrome: grey fills, almost no rules, one soft shadow; colour is reserved for data.
   Root stays 100%; every size is rem (1rem = 16px at default). */
:root {
  /* Type families — self-hosted woff2, OFL */
  --ff-font-display: "Inter", system-ui, sans-serif;  /* display optical size: page, section, card + chart titles ONLY (font-optical-sizing:auto gives opsz 32 at title sizes) */
  --ff-track-display: -0.022em;
  --ff-font-sans: "Inter", system-ui, sans-serif;    /* everything else, incl. nav and bands */
  --ff-num: tabular-nums lining-nums;                /* font-variant-numeric on every number */

  /* Type scale — role: weight size/line-height family */
  --ff-type-page:    600 2rem/2.25rem var(--ff-font-display);     /* 32/36 page title (phone 28/32), letter-spacing var(--ff-track-display) */
  --ff-type-page-sm: 600 1.75rem/2rem var(--ff-font-display);
  --ff-type-section: 600 1.375rem/1.75rem var(--ff-font-display); /* 22/28 */
  --ff-type-card:    600 1.125rem/1.5rem var(--ff-font-display);  /* 18/24 card + chart takeaway title */
  --ff-type-body:    400 1.0625rem/1.625rem var(--ff-font-sans);  /* 17/26 prose, takeaway lines */
  --ff-type-data:    400 1rem/1.5rem var(--ff-font-sans);         /* 16/24 cells, inputs; nav links */
  --ff-type-name:    600 1rem/1.5rem var(--ff-font-sans);         /* 16/24 names, buttons, active nav */
  --ff-type-meta:    400 0.875rem/1.25rem var(--ff-font-sans);    /* 14/20 secondary, captions, headers (600) */
  --ff-type-band:    600 0.875rem/1.25rem var(--ff-font-sans);    /* 14/20 sentence case, on #f5f5f7 */
  --ff-type-tick:    400 0.8125rem/1rem var(--ff-font-sans);      /* 13/16 chart ticks ONLY */

  /* Neutral ramp (true neutral) */
  --ff-white:  #ffffff;  /* page, surfaces */
  --ff-n50:    #fafafa;  /* row hover, canvas */
  --ff-n100:   #f5f5f7;  /* fills: segmented track, logo tile, key column, bands, search field */
  --ff-select: #ececf0;  /* linked / expanded / selected row + menu item */
  --ff-line:   #e8e8ed;  /* hairlines, card borders */
  --ff-line-2: #d2d2d7;  /* control borders, chart baseline */
  --ff-grid:   #efeff2;  /* chart gridlines */
  --ff-chart-axis: #e3e3e8; /* chart baseline */
  --ff-ref:    #a1a1a6;  /* chart reference lines: 1px dashed 3/4; the label carries the weight */
  --ff-ink-3:  #636366;  /* meta 6.0:1 */
  --ff-ink-2:  #424245;  /* secondary 10.2:1 */
  --ff-ink:    #1d1d1f;  /* primary text, primary button, switch on 16.8:1 */

  /* The only UI colour */
  --ff-link:       #0066cc; /* links, focus ring, linked-mark ring; 5.6:1 */
  --ff-link-hover: #004f9e;
  --ff-focus: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;

  /* Signals — pale tints behind ink text + glyph (▲ ▼ ! ●); never alone */
  --ff-good: #e4f1ea; --ff-bad: #f8e6e7; --ff-caution: #f7efd6; --ff-neutral: #f5f5f7;
  --ff-good-ink: #2e7553; --ff-bad-ink: #b23b44;   /* diverging marks, signed values */

  /* Data colour — charts and heat keep full strength */
  --ff-heat-0: #f2f6fb; --ff-heat-1: #dbe7f4; --ff-heat-2: #bcd3ea; --ff-heat-3: #96b9de; --ff-heat-4: #6f9dd0;
  --ff-c1: #d1410c; --ff-c2: #00857a; --ff-c3: #c2185b; --ff-c4: #9a6b00;
  --ff-c5: #5b45a8; --ff-c6: #8b5a2b; --ff-c7: #0b72b5; --ff-c8: #5f7f00;
  --ff-context: #8e8e93;   /* de-emphasised marks 3.3:1 */

  /* Space — 4px base; no other values. Card padding s6 (phone s4), between cards s5, between control groups s5, between sections s7 */
  --ff-s1: 0.25rem; --ff-s2: 0.5rem; --ff-s3: 0.75rem; --ff-s4: 1rem; --ff-s5: 1.5rem; --ff-s6: 2rem; --ff-s7: 3rem;

  /* Size */
  --ff-control: 2.5rem; --ff-control-touch: 2.75rem;
  --ff-row: 3rem; --ff-row-player: 4rem; --ff-row-band: 2.25rem;
  --ff-tile: 2.25rem; --ff-avatar-lg: 6rem; --ff-header: 3.5rem; --ff-tabbar: 3.5rem; --ff-hit-chart: 1.5rem;

  /* Shape — 6 on every control and small square, 8 on every card */
  --ff-r-control: 6px;   /* buttons, inputs, selects, chips, segmented, pills, tags, logo tiles */
  --ff-r-card: 8px;      /* cards, panels, chart boxes, sheets, dialogs, menus */
  --ff-r-full: 999px;    /* switches, avatars, headshots, logo discs, chart marks */
  /* bands: background var(--ff-n100), no rule */
  --ff-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);  /* menus, popovers, sheets, toasts ONLY */
  --ff-scrim: rgba(0, 0, 0, 0.28);

  /* Layout */
  --ff-page-max: 76rem; --ff-gutter: 2rem; --ff-gutter-sm: 1rem; --ff-bp: 720px;
}
@media (pointer: coarse) { :root { --ff-control: var(--ff-control-touch); } }