/* furoki-tokens.css v3: the Furoki brand's colours, type and shapes. Source of truth:
   furoki-website/brand/ (published at https://furoki.com/brand/furoki-tokens.css). Bingo and Concierge carry
   copies; change it here first, then copy it across (see brand/README.md). Components live in furoki.css,
   which uses only these variables.
   Type: SF Pro (Inter where SF Pro isn't installed) in two weights, regular 400 and medium 500, on a six-step
   scale with 13px as the base and 24px as the largest. Text comes in three greys: strong for headings, links and
   emphasis, default for body copy, subtle for secondary notes. Subtle is #707070 rather than the spec's #7f7f7f
   because #7f7f7f is under WCAG AA contrast (4.5:1) on our white and grey backgrounds.
   v3 (Oct 2026): the warm sand page is the base for every Furoki site, so the neutrals below are the warm set
   (subtle #6c6a66 keeps 4.5:1 on sand). Added: focus ring, spacing, radius steps, line heights, display sizes,
   a 44px tap size, and --accent/--accent-2, the one pair each product overrides in its own CSS (see README). */
:root {
  --text-strong: #292929; --text-default: #5d5d5d; --text-subtle: #6c6a66; --bg-selected: #efece6; --border: #e2ded5;
  --ink: #292929; --muted: #6c6a66; --paper: #f3f1ec; --alt: #f8f7f4; --card: #ffffff; --line: #e2ded5;
  --line-strong: #d6d1c6; --ink-hover: #3d3d3d; --card-hover: #f8f7f4; --on-gfx: #ffffff; --on-light: #292929; --nav-bg: rgba(243, 241, 236, .9);
  --focus: #3d5a78; --focus-on-dark: #ffffff;
  --accent: #ff8a4c; --accent-2: #ff9ec7;
  --orange: #ff8a4c; --violet: #8b7bff; --pink: #ff9ec7; --yellow: #ffd66b; --green: #4fd1a5; --blue: #7cb7ff;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Inter', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', 'Inter', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --weight-regular: 400; --weight-medium: 500;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-24: 24px;
  --fs-display: clamp(28px, 3.6vw, 44px); --fs-h2: clamp(24px, 3vw, 36px);
  --lh-tight: 1.12; --lh-heading: 1.3; --lh-body: 1.6;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 64px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --tap: 44px;
  --icon-stroke: 1px;
  /* warm set: furoki.com's sand page, framed rows with corner ticks, and dark glass panels over landscape scenes.
     --sand-subtle replaces --text-subtle on sand so small grey text keeps 4.5:1. */
  --sand: #f3f1ec; --sand-raised: #f8f7f4; --sand-line: #e2ded5; --sand-subtle: #6c6a66; --tick: #292929;
  --glass: rgba(26, 24, 22, .58); --glass-strong: rgba(26, 24, 22, .74); --glass-line: rgba(255, 255, 255, .16);
  --glass-text: #ffffff; --glass-muted: rgba(255, 255, 255, .72); --glass-faint: rgba(255, 255, 255, .28);
  --shadow: 0 24px 60px rgba(0, 0, 0, .08);
  --radius: 24px;
  --gut: clamp(16px, 3vw, 40px);
  --col: min(1240px, calc(100% - 2 * var(--gut)));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the pattern on .gfx.grid panels; each product may set its own (Bingo: ball outlines) */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.6' fill='white' fill-opacity='.7'/%3E%3C/svg%3E");
  --g-party: radial-gradient(70% 90% at 0% 100%, #ffb36b 0%, transparent 60%), linear-gradient(105deg, #ff7a45 0%, #ff5f8f 45%, #8b6bff 100%);
  --g-mint: radial-gradient(70% 90% at 100% 0%, #b6f0c8 0%, transparent 55%), linear-gradient(110deg, #22a37a 0%, #2f9fc4 55%, #6a7dff 100%);
  --g-sun: radial-gradient(80% 80% at 10% 0%, #ffe08a 0%, transparent 60%), linear-gradient(150deg, #ffb347 0%, #ff7a45 50%, #e8457a 100%);
  --g-sky: radial-gradient(90% 70% at 15% 0%, #a9b8ff 0%, transparent 60%), linear-gradient(165deg, #7d8fff 0%, #4b56d6 50%, #1d2366 100%);
  --g-night: radial-gradient(70% 70% at 100% 100%, rgba(255, 138, 76, .6) 0%, transparent 60%), radial-gradient(80% 80% at 0% 0%, #4a3f8f 0%, transparent 60%), #15122b;
}