@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Geist:wght@400;500;600;700&family=Lexend:wght@400;500&display=swap');

:root {
  /* Brand */
  --ts-green:       #86BA6C;
  --ts-green-tint:  #A8DB8E;
  --ts-green-50:    #F8FFF3;
  --ts-green-100:   #E7F1E1;
  --ts-green-200:   #DCE9D2;

  --ts-ink:         #09140D;
  --ts-ink-soft:    #11281A;
  /* rgba helpers — RGB triplets of the above, for overlay use */
  --ts-ink-rgb:     9, 20, 13;
  --ts-ink-soft-rgb: 17, 40, 26;

  --ts-cream:       #F8F7F3;
  --ts-cream-2:     #F3F0E6;
  --ts-bone:        #E8E3D1;
  --ts-stone:       #D1D8D3;

  --ts-muted:       #6A756D;
  --ts-muted-2:     #848484;

  --ts-red:         #DC362E;
  --ts-red-50:      #FFEAE9;

  /* Semantic */
  --color-bg:           var(--ts-cream);
  --color-bg-elevated:  #FFFFFF;
  --color-fg:           var(--ts-ink);
  --color-fg-muted:     var(--ts-muted);
  --color-border:       var(--ts-bone);
  --color-border-soft:  var(--ts-stone);
  --color-accent:       var(--ts-green);

  /* Typography */
  --font-display: "Coiny", "Fredoka", system-ui, sans-serif;
  --font-body:    "Geist", "Inter", system-ui, sans-serif;
  --font-label:   "Lexend", "Geist", system-ui, sans-serif;

  /* Radii */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-button-dark:  0 8px 12px 0 rgba(17, 40, 26, 0.24);
  --shadow-button-green: 0 8px 20px 0 rgba(168, 219, 142, 0.32);
  --shadow-card:         0 8px 12px 0 rgba(17, 40, 26, 0.08);
  --shadow-soft:         0 4px 8px 0 rgba(17, 40, 26, 0.12);
  --shadow-pill-glow:    0 0 16px 0 rgba(168, 219, 142, 0.25);
  --shadow-appstore:       0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-appstore-hover: 0 12px 28px rgba(134, 186, 108, 0.35);

  /* Opacity variants — cream/white/green on dark backgrounds */
  --ts-cream-a04:  rgba(248, 247, 243, 0.04);
  --ts-cream-a07:  rgba(248, 247, 243, 0.07);
  --ts-cream-a28:  rgba(248, 247, 243, 0.28);
  --ts-cream-a30:  rgba(248, 247, 243, 0.30);
  --ts-cream-a32:  rgba(248, 247, 243, 0.32);
  --ts-cream-a40:  rgba(248, 247, 243, 0.40);
  --ts-cream-a55:  rgba(248, 247, 243, 0.55);
  --ts-cream-a58:  rgba(248, 247, 243, 0.58);
  --ts-cream-a65:  rgba(248, 247, 243, 0.65);
  --ts-cream-a68:  rgba(248, 247, 243, 0.68);
  --ts-cream-a78:  rgba(248, 247, 243, 0.78);
  --ts-white-a07:  rgba(255, 255, 255, 0.07);
  --ts-white-a08:  rgba(255, 255, 255, 0.08);
  --ts-green-a12:  rgba(134, 186, 108, 0.12);
  --ts-green-a25:  rgba(134, 186, 108, 0.25);
  --ts-black-a55:  rgba(0, 0, 0, 0.55);
  --ts-cream-a92:  rgba(248, 247, 243, 0.92);
  --ts-white-a75:  rgba(255, 255, 255, 0.75);
  --shadow-appstore-light: 0 8px 20px rgba(0, 0, 0, 0.25);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
}