/* ================================================================
   TERRABLOOM GARDEN CO. — DESIGN TOKENS
   Bold flat editorial · Material You structure · Zero shadows
   Bauhaus geometry · Chartreuse × Ink × Cream
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Epilogue:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Core Palette ── */
  --ink:          #0F0F0E;
  --ink-80:       #1E1E1C;
  --ink-60:       #3D3D3A;
  --ink-40:       #6B6B67;
  --ink-20:       #A8A8A4;
  --ink-10:       #D4D4CF;
  --ink-05:       #EDEDEA;

  --cream:        #FAF8F2;
  --cream-deep:   #F0EDE3;
  --cream-darker: #E3DFD1;

  --chartreuse:   #BFEA3A;   /* signature accent */
  --chart-dark:   #8CB820;
  --chart-xdark:  #5F7E10;
  --chart-pale:   #E8F7A0;

  --terracotta:   #D4622A;   /* warm secondary */
  --terra-light:  #E8956A;
  --terra-pale:   #F7DDD0;

  --moss:         #2D5016;   /* deep green */
  --moss-mid:     #4A7A28;
  --moss-light:   #7DB356;

  --sky:          #2A6B8C;   /* cool contrast */

  /* ── Semantic ── */
  --color-bg:       var(--cream);
  --color-surface:  var(--cream-deep);
  --color-border:   var(--ink-10);
  --color-text:     var(--ink);
  --color-text-dim: var(--ink-40);
  --color-accent:   var(--chartreuse);
  --color-cta:      var(--ink);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Epilogue', system-ui, sans-serif;

  /* Type scale */
  --t-xs:   0.6875rem;   /* 11px */
  --t-sm:   0.8125rem;   /* 13px */
  --t-base: 1rem;        /* 16px */
  --t-md:   1.125rem;    /* 18px */
  --t-lg:   1.375rem;    /* 22px */
  --t-xl:   1.75rem;     /* 28px */
  --t-2xl:  2.25rem;     /* 36px */
  --t-3xl:  3rem;        /* 48px */
  --t-4xl:  4rem;        /* 64px */
  --t-5xl:  5.5rem;      /* 88px */
  --t-6xl:  7.5rem;      /* 120px */

  /* ── 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;
  --s-32: 128px;

  /* ── Shape — flat, minimal radius ── */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ── Layout ── */
  --max-w:        1320px;
  --max-w-narrow: 860px;

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-io:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-mid:    220ms;
  --dur-slow:   380ms;
  --dur-xslow:  600ms;

  /* ── Z-indices ── */
  --z-base:   1;
  --z-nav:    100;
  --z-modal:  200;
  --z-cookie: 300;
  --z-top:    400;
}