/* ============================================================
   Apple Pie by Lupita — design tokens
   Palette sampled from the studio's own logo:
     pink  #FFC0D1  (the dress)
     brown #554B42  (the stand + script wordmark)
   ============================================================ */

:root {
  /* ---- colour ---- */
  --color-white: #fff;
  --color-black: #000;

  --color-cream-100: #f6f3ef;
  --color-cream-200: #f0ebe4;
  --color-sand-300: #e8dcd0;
  --color-sand-400: #dccbba;

  --color-ink: #2a241f;
  --color-brown: #554b42;
  --color-grey-500: #8a8178;
  --color-grey-300: #cfc7bd;

  --color-pink-200: #ffd8e3;
  --color-pink-300: #ffc0d1;
  --color-pink-500: #ef86ab;
  --color-pink-700: #cf5f89;

  --color-background-primary: var(--color-cream-100);
  --color-background-secondary: var(--color-sand-300);
  --color-error: #9d1414;

  /* ---- easing ---- */
  --ease-custom-1: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);

  /* ---- type ---- */
  --font-family-primary: "Newsreader", Georgia, "Times New Roman", Garamond, serif;
  --font-family-content: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --font-display-1: var(--font-weight-regular) 2.875rem / 1.1 var(--font-family-primary);
  --font-display-2: var(--font-weight-regular) 2.1875rem / 1.05 var(--font-family-primary);
  --font-display-3: var(--font-weight-regular) 1.5625rem / 1.3 var(--font-family-primary);
  --font-display-4: var(--font-weight-medium) 1.25rem / 1.15 var(--font-family-content);
  --font-display-5: var(--font-weight-regular) 1.125rem / 1.5 var(--font-family-primary);
  --font-body: var(--font-weight-regular) 1.125rem / 1.55 var(--font-family-primary);
  --font-label-1: var(--font-weight-regular) 1.125rem / 1.1 var(--font-family-primary);
  --font-label-2: var(--font-weight-medium) 1.125rem / 1.5 var(--font-family-content);
  --font-label-form: var(--font-weight-regular) 0.9375rem / 1 var(--font-family-content);
  --font-tiny-1: var(--font-weight-regular) 0.8125rem / 1.6 var(--font-family-content);
  --font-tiny-2: var(--font-weight-regular) 0.625rem / 1.4 var(--font-family-content);
  --font-button: var(--font-weight-regular) 0.9375rem / 1 var(--font-family-primary);
  --font-header: var(--font-weight-regular) clamp(46px, 5vw, 120px) / 1 var(--font-family-primary);

  /* ---- layout ---- */
  --grid-columns: 2;
  --grid-gap: 10px;
  --page-x: 20px;
  --header-h: 74px;
  --section-y: 90px;
}

@media (min-width: 768px) {
  :root {
    --grid-columns: 12;
    --grid-gap: 16px;
    --page-x: 40px;
    --section-y: 140px;
    --font-display-1: var(--font-weight-regular) 7.5rem / 1 var(--font-family-primary);
    --font-display-2: var(--font-weight-regular) 2.5rem / 1.05 var(--font-family-primary);
    --font-display-3: var(--font-weight-regular) 5rem / 1 var(--font-family-primary);
    --font-display-4: var(--font-weight-medium) 1.875rem / 1.06 var(--font-family-content);
    --font-display-5: var(--font-weight-regular) 1.3125rem / 1 var(--font-family-primary);
    --font-label-1: var(--font-weight-regular) 1rem / 1.1 var(--font-family-primary);
    --font-label-2: var(--font-weight-medium) 0.9375rem / 1.5 var(--font-family-content);
    --font-header: var(--font-weight-regular) clamp(46px, 6.5vw, 120px) / 1 var(--font-family-primary);
    --header-h: 88px;
  }
}