/* Pirents design tokens — source of truth is DESIGN.md. Palette taken from the pie logo. */
@font-face {
  font-family: "Squeaky";
  src: url("../fonts/squeaky.ttf") format("truetype");
  font-weight: 400;          /* single weight; 700/800 use synthetic bold to match the logo's marker strokes */
  font-style: normal;
  font-display: swap;
  size-adjust: 124%;         /* the face has a small body; scale so headings match the type scale */
}
:root {
  /* Brand red (wordmark, filling) */
  --color-accent-50:  #FBF1F0;
  --color-accent-100: #F6DDDC;
  --color-accent-200: #EDB9BA;
  --color-accent-300: #E08F94;
  --color-accent-400: #CC6069;
  --color-accent-500: #B5434B;
  --color-accent-600: #9C3740;
  --color-accent-700: #7E2C34;
  --color-accent-800: #62222A;
  --color-accent-900: #44171D;

  /* Crust gold and cream */
  --color-gold-50:  #FDF6E7;
  --color-gold-100: #FBEBC9;
  --color-gold-500: #E8A93A;
  --color-gold-600: #D4952A;
  --color-cream:    #F5E6C3;
  --color-cream-2:  #FAF3E3;
  --color-crust:    #A7712F;
  --color-crust-dark: #7A4E14;
  --color-cocoa:      #4A4038;   /* wordmark, warm near-black */

  /* Neutrals (warm) */
  --color-bg:            #F7F3EC;   /* Linen: page background */
  --color-surface:       #FFFFFF;
  --color-surface-2:     #FBF8F3;
  --color-border:        #E6E0D6;
  --color-border-strong: #CFC7BB;
  --color-ink:      #2F2A27;   /* warm charcoal */
  --color-ink-2:    #534D48;
  --color-muted:    #6F6A64;
  --color-disabled: #A8A29A;

  /* Semantic */
  --color-success:     #1F7A3E;
  --color-success-bg:  #E7F4EB;
  --color-warning:     #8A5A00;
  --color-warning-bg:  #FBEBC9;
  --color-danger:      #A8201A;
  --color-danger-bg:   #FBE9E7;
  --color-info:        #1F5FBF;
  --color-info-bg:     #E8EFFC;

  /* Category tiles */
  --tile-wheelchair: #F5E6C3;
  --tile-scooter:    #FBEBC9;
  --tile-bike:       #F6DDDC;
  --tile-car:        #E9E2D8;
  --tile-stroller:   #FBE3EA;
  --tile-walker:     #E4EEE4;
  --tile-beach:      #FFE3CC;
  --tile-other:      #ECE6DC;

  /* Type */
  --font-display: "Squeaky", "Nunito", system-ui, sans-serif;
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-display: 3.5rem;
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(47,42,39,.06);
  --shadow-md: 0 8px 24px rgba(47,42,39,.09);
  --shadow-lg: 0 16px 48px rgba(47,42,39,.16);
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-accent-500);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;
}

@media (max-width: 639px) {
  :root {
    --text-display: 2.5rem;
    --text-h1: 2rem;
    --text-h2: 1.625rem;
    --text-h3: 1.375rem;
    --gutter: 16px;
    --header-h: 64px;
  }
}