/* ==========================================================================
   Pet Air Valet — Design tokens
   Canonical source for color, type, spacing, radii, shadows.
   ========================================================================== */

@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-Regular.ttf')       format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-Italic.ttf')        format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-Medium.ttf')        format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-MediumItalic.ttf')  format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-SemiBold.ttf')      format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-Bold.ttf')          format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('../assets/fonts/NotoSerif-BoldItalic.ttf')    format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand primary palette --- */
  --pav-midnight-blue:    hsl(213 45% 16%);
  --pav-dark-grey:        hsl(214 14% 22%);
  --pav-cabin-cream:      hsl(39 45% 93%);
  --pav-golden:           hsl(41 66% 69%);
  --pav-warm-terracotta:  hsl(25 51% 53%);

  /* --- Extended palette --- */
  --pav-seat-tan:         hsl(35 40% 67%);
  --pav-slate-teal:       hsl(200 20% 36%);
  --pav-deep-forest:      hsl(143 21% 29%);
  --pav-bronze:           hsl(30 38% 47%);
  --pav-champagne-rose:   hsl(25 35% 66%);
  --pav-golden-amber:     hsl(37 91% 55%);
  --pav-status-green:     hsl(133 100% 32%);
  --pav-concierge-cream:  hsl(40 33% 98%);

  /* --- Neutrals --- */
  --pav-white:            #ffffff;
  --pav-border-grey:      hsl(0 0% 86%);

  /* --- Semantic tokens --- */
  --bg:         var(--pav-cabin-cream);
  --bg-paper:   hsl(39 55% 96%);
  --fg:         var(--pav-midnight-blue);
  --fg-2:       hsla(213 45% 16% / 0.75);
  --fg-3:       hsla(213 45% 16% / 0.50);
  --fg-4:       hsla(213 45% 16% / 0.30);
  --card:       var(--pav-white);
  --rule:       hsla(41 66% 69% / 0.45);
  --rule-soft:  hsla(41 66% 69% / 0.22);
  --rule-ink:   hsla(213 45% 16% / 0.10);
  --accent:     var(--pav-golden);
  --primary:    var(--pav-midnight-blue);
  --cta:        var(--pav-warm-terracotta);
  --ring:       var(--pav-golden);

  /* --- Radii --- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-2xl:  16px;
  --r-3xl:  20px;
  --r-4xl:  28px;
  --r-full: 999px;

  /* --- Shadows --- */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-soft:    0 4px 22px rgba(0, 0, 0, 0.08);
  --shadow-elegant: 0 8px 32px rgba(21, 38, 59, 0.12);
  --shadow-glow:    0 0 40px rgba(227, 192, 124, 0.30);
  --shadow-card:    0 1px 2px hsla(213 45% 16% / 0.04), 0 6px 18px hsla(213 45% 16% / 0.04);

  /* --- Type families --- */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Noto Serif', Georgia, serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Fluid type scale --- */
  --text-display: clamp(2.5rem, 5vw + 1rem, 5.25rem);
  --text-hero:    clamp(1.75rem, 4vw + 0.5rem, 3.25rem);
  --text-h2:      clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  --text-h3:      clamp(1.125rem, 2vw + 0.25rem, 1.75rem);
  --text-body-lg: clamp(1rem, 1vw + 0.5rem, 1.125rem);
  --text-body:    16px;
  --text-body-sm: 14px;

  /* --- Tracking & leading --- */
  --tr-tight: -0.024em;
  --tr-snug:  -0.014em;
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.35;
  --lh-body:  1.6;

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-calm:  cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Base typography */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 0.5em;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: var(--tr-snug); line-height: var(--lh-base); }

p { margin: 0 0 1em; color: var(--fg-2); }
p.lead { font-size: var(--text-body-lg); color: var(--fg); }
a { color: var(--cta); text-decoration: none; font-weight: 500; transition: color 150ms ease; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
strong { font-weight: 600; color: var(--fg); }

code, .mono { font-family: var(--font-mono); font-size: 0.875em; }

::selection { background: hsla(41 66% 69% / 0.55); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}