/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — derived from the keelo mobile app.
   Off-white surface + green brand, per the web brief.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:            #FAF8F2;   /* off-white app background */
  --bg-sunk:       #F2EFE6;   /* slightly deeper off-white */
  --card:          #FFFFFF;
  --card-tint:     #FCFBF7;

  /* Brand green scale */
  --green:         #147A3D;
  --green-dark:    #0F5F31;
  --green-cta:     #22A851;
  --green-lite:    #DDEFE4;
  --green-tint:    #F0F7F2;
  --green-hero:    #155228;

  /* Text */
  --text:          #1F1F1F;
  --text-strong:   #141414;
  --muted:         #7A7A7A;
  --faint:         #A6A29A;

  /* Lines */
  --border:        #E7E3DA;
  --border-soft:   #EFEBE2;

  /* Semantic outcome colors */
  --win:           #38A169;
  --draw:          #A0AEC0;
  --loss:          #E53E3E;
  --accent:        #E9A23B;   /* fee / gold accent */
  --blue:          #0E6FA8;   /* check-in state */
  --red:           #DC2626;   /* live */

  /* External brands */
  --chesscom:      #7FA650;
  --lichess:       #4A4A4A;
  --fide:          #2B5C9B;

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-logo: 'Playwrite ID', 'Segoe Script', cursive;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.375rem;
  --text-xl:   2rem;
  --text-hero: 3.25rem;

  /* Spacing rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radii */
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* Shadows — soft, layered */
  --shadow-sm:  0 1px 3px rgba(20, 20, 20, 0.05);
  --shadow-md:  0 2px 10px rgba(20, 20, 20, 0.07);
  --shadow-lg:  0 12px 34px rgba(15, 95, 49, 0.14);
  --shadow-cta: 0 8px 22px rgba(34, 168, 81, 0.35);

  /* Motion */
  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   520ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Content width for the web layout */
  --page: 1120px;
  --shell: 480px;
}