/* ============================================================
   Summer Smith — Design Tokens
   Every color, type size, and spacing value lives here.
   Nothing hardcoded in components.
   ============================================================ */

:root {
  /* --- Brand --------------------------------------------- */
  --color-teal: #5BBFBA;         /* The wave. The only accent. Used sparingly. */
  --color-teal-light: #A8DEDA;   /* Subtle teal, backgrounds only */

  /* --- Neutrals ------------------------------------------ */
  --color-cream: #F5EDE4;        /* Warm page background — not pure white */
  --color-warm-white: #FDFAF7;   /* Card/section backgrounds */
  --color-shell: #EDE2D3;        /* Deeper sand — alternating sections */
  --color-sea-mist: #E9F1EF;     /* Whisper of sea — rare tint */
  --color-sand: #E8DDD4;         /* Borders, dividers */
  --color-driftwood: #BFB0A3;    /* Secondary text, labels */

  /* --- Text ---------------------------------------------- */
  --color-ink: #1C1917;          /* Primary text — warm near-black */
  --color-ink-light: #6B5E55;    /* Supporting text */

  /* --- States -------------------------------------------- */
  --color-white: #FFFFFF;

  /* --- Photography backdrop ------------------------------ */
  --color-photo-bg: #F2E8DF;     /* Product photo cream/beige */

  /* --- Typefaces ----------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Type scale (use only these) ----------------------- */
  --text-xs:   0.6875rem;   /* 11px — legal, fine print */
  --text-sm:   0.8125rem;   /* 13px — labels, tags, navigation */
  --text-base: 0.9375rem;   /* 15px — body copy */
  --text-md:   1.125rem;    /* 18px — lead text, sub-headings */
  --text-lg:   1.5rem;      /* 24px — section titles (DM Sans) */
  --text-xl:   2.25rem;     /* 36px — page headers (Cormorant) */
  --text-2xl:  3.5rem;      /* 56px — hero (Cormorant, light) */
  --text-3xl:  5rem;        /* 80px — editorial statement (Cormorant) */

  /* --- Spacing (8px base) -------------------------------- */
  --space-1:  0.5rem;    /* 8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-5:  3rem;      /* 48px */
  --space-6:  4rem;      /* 64px */
  --space-7:  6rem;      /* 96px */
  --space-8:  8rem;      /* 128px */
  --space-9:  12rem;     /* 192px */
  --space-10: 16rem;     /* 256px */

  /* --- Layout -------------------------------------------- */
  --container-max: 1280px;

  /* --- Motion -------------------------------------------- */
  --ease-image: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tracking-label: 0.12em;
}