/* ==========================================================================
   Postcode Pizza — design tokens
   Source: Brand & Digital Style Guide v1.0 · Direction 2L (Ember + Red)
   Nothing in this file may be overridden ad hoc. Add a token instead.
   ========================================================================== */

:root {
  /* ---- 03 Colour · core ------------------------------------------------ */
  --pp-semolina: #FFF3DC; /* default page ground, ~60% of any layout */
  --pp-ovenred:  #C4241B; /* the action colour. Buttons, links, live states. */
  --pp-ember:    #E07B1A; /* heat, timers, progress. Large areas only.       */
  --pp-char:     #16130F; /* all body text; ground for dark sections         */
  --pp-flame:    #F7B733; /* accent on char only                             */

  /* ---- 03 Colour · neutrals & support --------------------------------- */
  --pp-paper:  #FFFAF0; /* cards on semolina        */
  --pp-crust:  #E0D5BE; /* hairlines, dividers      */
  --pp-ash:    #A79C8A; /* meta on char             */
  --pp-stone:  #6E6558; /* secondary text on light  */
  --pp-basil:  #2F6B3C; /* confirmed / success only */
  --pp-scorch: #8A3227; /* errors, sold out         */

  /* ---- 03 Colour · derived shades -------------------------------------
     Tints used by the concepts that aren't named in the guide. Kept as
     tokens so they can't drift into one-off hex values in components. */
  --pp-ink:         #3A332A; /* running text on semolina — softer than char */
  --pp-ink-on-heat: #2A241D; /* running text on ember                       */
  --pp-void:        #0E0C0A; /* photography ground, deepest surface         */
  --pp-char-rise:   #201C17; /* raised track/rail on a char ground          */
  --pp-char-line:   #2E2924; /* hairline on a char ground                   */
  --pp-crust-deep:  #EDE2C8; /* progress track on a semolina ground         */
  --pp-basil-light: #7DBE8A; /* success text on a char ground               */

  /* ---- 04 Typography · families ---------------------------------------- */
  --pp-font-display: "Anton", "Arial Narrow", sans-serif;      /* display only  */
  --pp-font-ui:      "Oswald", "Arial Narrow", sans-serif;     /* subheads, UI  */
  --pp-font-body:    "Libre Franklin", Helvetica, sans-serif;  /* running text  */
  --pp-font-data:    "Space Mono", ui-monospace, monospace;    /* data, stamps  */

  /* ---- 04 Typography · scale ------------------------------------------
     size / line-height / tracking, per the token table in the guide. */
  --pp-display-xl:    88px; --pp-display-xl-lh:    0.86; /* hero, one per page */
  --pp-display-l:     60px; --pp-display-l-lh:     0.90; /* section openers    */
  --pp-display-m:     40px; --pp-display-m-lh:     0.95; /* card titles, prices*/
  --pp-display-track: -0.01em;

  --pp-heading-l:     30px; --pp-heading-l-lh:  34px; --pp-heading-l-track: 0.03em;
  --pp-heading-s:     20px; --pp-heading-s-lh:  24px; --pp-heading-s-track: 0.08em;

  --pp-body-l:        19px; --pp-body-l-lh:     30px;
  --pp-body-m:        17px; --pp-body-m-lh:     27px;
  --pp-body-s:        15px; --pp-body-s-lh:     23px;

  --pp-meta:          12px; --pp-meta-track:    0.20em;
  --pp-data-xl:       44px;

  /* ---- 10 Layout · 8px base spacing scale ------------------------------ */
  --pp-space-1:  4px;  /* icon to label        */
  --pp-space-2:  8px;  /* within a control     */
  --pp-space-3:  16px; /* between fields       */
  --pp-space-4:  24px; /* card padding, gutters*/
  --pp-space-5:  40px; /* between card groups  */
  --pp-space-6:  64px; /* section padding      */
  --pp-space-7:  96px; /* between major sections */

  /* ---- 10 Layout · grid ------------------------------------------------
     --pp-gutter is the page margin. It steps with the breakpoints defined
     in the guide; 48px is the concept-artboard value at ~1280. */
  --pp-max-width: 1440px;
  --pp-gutter:    20px; /* mobile <768 */
  --pp-columns:   4;
  --pp-column-gap: 16px;

  /* ---- 10 Layout · corners, rules, elevation --------------------------- */
  --pp-radius:       0;   /* square by default. No 8px/12px middle ground.  */
  --pp-radius-chip:  4px; /* small chips only                               */
  --pp-rule-hair:    1px; /* dividers, in crust                             */
  --pp-rule-solid:   2px; /* containers and emphasis, in char               */
  --pp-rule-route:   3px; /* dashed ovenred, routes and empty states        */
  --pp-shadow-lift:  0 2px 0 rgba(22, 19, 15, 0.16), 0 12px 24px rgba(22, 19, 15, 0.12);

  /* ---- 08 UI kit · control sizing -------------------------------------- */
  --pp-control-lg: 60px;
  --pp-control-md: 48px;
  --pp-control-sm: 44px; /* minimum touch target */

  /* ---- 09 Motion ------------------------------------------------------- */
  --pp-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --pp-dur-fast:  120ms; /* hover, focus, pill toggles — colour and border only */
  --pp-dur-base:  200ms; /* slot selection, accordion, tab change — the default */
  --pp-dur-slow:  320ms; /* sheets, drawers, section reveals                    */
}

@media (min-width: 768px) {
  :root {
    --pp-gutter: 40px;
    --pp-columns: 8;
    --pp-column-gap: 20px;
  }
}

@media (min-width: 1280px) {
  :root {
    --pp-gutter: 48px;
    --pp-columns: 12;
    --pp-column-gap: 24px;
  }
}

@media (min-width: 1440px) {
  :root {
    --pp-gutter: 80px;
  }
}

/* 09 Motion — "Respect prefers-reduced-motion: fade only." */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pp-dur-fast: 1ms;
    --pp-dur-base: 1ms;
    --pp-dur-slow: 1ms;
  }
}