/* ─────────────────────────────────────────────────────────────
   Groshi · Design Tokens
   Source: Groshi Design System / colors_and_type.css
   ───────────────────────────────────────────────────────────── */

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

:root {
  /* ─── Primary palette (exact values from brand SVGs) ─── */
  --groshi-emerald:     #2BB568;
  --groshi-emerald-700: #1F9755;
  --groshi-emerald-500: #2BB568;
  --groshi-emerald-300: #74D6A2;
  --groshi-emerald-100: #BDEAD0;
  --groshi-emerald-50:  #EAF8F0;

  --groshi-onyx:        #0D1513;
  --groshi-onyx-900:    #0D1513;
  --groshi-onyx-700:    #1C2622;
  --groshi-onyx-500:    #3A4A44;
  --groshi-onyx-300:    #6E7C76;
  --groshi-onyx-100:    #C9CFCC;

  --groshi-white:       #FFFFFF;
  --groshi-ruby:        #E03C20;
  --groshi-ruby-700:    #B82D14;
  --groshi-ruby-100:    #FBD7CF;

  /* ─── Secondary (soft) ─── */
  --groshi-seafoam:     #C6E1D8;
  --groshi-moonstone:   #DDDDDD;
  --groshi-sunstone:    #FCEDE8;

  /* ─── Semantic ─── */
  --bg:           var(--groshi-white);
  --bg-soft:      #F5F6F4;
  --bg-inverse:   var(--groshi-onyx);

  --fg:           var(--groshi-onyx);
  --fg-muted:     var(--groshi-onyx-500);
  --fg-subtle:    var(--groshi-onyx-300);
  --fg-on-dark:   var(--groshi-white);

  --border:        rgba(14, 20, 18, 0.10);
  --border-strong: rgba(14, 20, 18, 0.20);
  --border-dark:   rgba(255, 255, 255, 0.12);

  /* ─── Type ─── */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-caps:   0.06em;

  /* ─── Spacing (4px base) ─── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ─── Radius ─── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ─── Shadow ─── */
  --shadow-1: 0 1px 2px rgba(13,21,19,0.06), 0 1px 1px rgba(13,21,19,0.04);
  --shadow-2: 0 4px 12px rgba(13,21,19,0.08), 0 2px 4px rgba(13,21,19,0.04);
  --shadow-3: 0 12px 32px rgba(13,21,19,0.12), 0 4px 8px rgba(13,21,19,0.06);
  --shadow-emerald: 0 8px 20px rgba(43,181,104,0.30);

  /* ─── Motion ─── */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}