/* The Little Oven design tokens.
   Values come from the Figma "Design System" page (Direction 03, Playful & Friendly).
   Names mirror the Figma variables: brand/cream -> --brand-cream. */

:root {
  /* ---------- Colour: brand ---------- */
  --brand-cream: #FBF1E6;
  --brand-peach: #F4C3A5;
  --brand-blush: #EBB3B2;
  --brand-butter: #F3DDA0;
  --brand-terracotta: #C9745B; /* decorative only, never text or button fills */
  --brand-cocoa: #4A2E28;

  /* ---------- Colour: surface ---------- */
  --surface-page: #FBF1E6;
  --surface-card: #FFF8F1;
  --surface-peach-soft: #FBE3D3;
  --surface-blush-soft: #F8DEDC;

  /* ---------- Colour: text ---------- */
  --text-primary: #4A2E28;
  --text-muted: #8A6358;
  --text-on-action: #FFF8F1;

  /* ---------- Colour: border ---------- */
  --border-default: #F0D9C8;
  --border-strong: #D9B8A3;

  /* ---------- Colour: action ---------- */
  --action-primary: #A9573F;
  --action-primary-hover: #8F4733;
  --action-disabled: #E8D5C8;

  /* ---------- Colour: feedback ---------- */
  --feedback-error: #B3413B;
  --feedback-success: #5E7B52;

  /* ---------- Colour: overlay (cocoa at 40%) ---------- */
  --overlay: rgb(74 46 40 / 0.4);

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Spacing (space/1 to space/9) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Elevation ---------- */
  --shadow-card: 0 8px 24px rgba(74, 46, 41, 0.08);

  /* ---------- Fonts ---------- */
  --font-serif: "Young Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  /* ---------- Type scale (Figma text styles, desktop) ---------- */
  --display-size: 64px;  --display-lh: 1.1;
  --h1-size: 48px;       --h1-lh: 1.15;
  --h2-size: 36px;       --h2-lh: 1.2;
  --h3-size: 24px;       --h3-lh: 1.3;
  --h4-size: 20px;       --h4-lh: 1.4;
  --body-lg-size: 18px;  --body-lg-lh: 1.6;
  --body-size: 16px;     --body-lh: 1.6;
  --body-sm-size: 14px;  --body-sm-lh: 1.5;
  --button-size: 15px;   --button-lh: 1.2;
  --eyebrow-size: 12px;  --eyebrow-lh: 1.3;  --eyebrow-tracking: 0.12em;
  --hand-size: 26px;     --hand-lh: 1.2;
  --price-size: 16px;    --price-lh: 1.4;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --gutter: 120px;
  --section-pad: var(--space-9);
  --section-pad-tight: 72px;

  /* ---------- Focus ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-drawer: 260ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1279px) {
  :root { --gutter: 64px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; }
}

/* Mobile type overrides from Figma: Display 40, H1 34, H2 28, H3 22. Body stays the same. */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --display-size: 40px;
    --h1-size: 34px;
    --h2-size: 28px;
    --h3-size: 22px;
    --section-pad: var(--space-7);
    --section-pad-tight: var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-drawer: 0ms;
  }
}