/* PixelAtrium Local — design tokens
   Warm desert palette (copper, sand, deep teal, navy) with a nod to the
   PixelAtrium mosaic "P". Light theme only (outdoor phone reading).
   Contrast ratios are measured; see README.md "Contrast". */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: surfaces ---- */
  --sand-50:  #FBF7F0;  /* page background */
  --sand-100: #F4EBDD;  /* alternate section */
  --sand-200: #E9DAC2;  /* borders, dividers, placeholders */
  --sand-300: #D9C3A0;  /* decorative border only */
  --line-strong: #8A7861; /* form-control borders (>=3:1 non-text contrast) */
  --white:    #FFFFFF;  /* cards */

  /* ---- Color: ink ---- */
  --ink:      #1B2633;  /* body text       14.3:1 on sand-50, 13.0:1 on sand-100 */
  --ink-2:    #4B4A47;  /* secondary text   8.3:1 on sand-50, 7.5:1 on sand-100 */
  --ink-3:    #6A5F52;  /* hints/captions   5.8:1 on sand-50, 5.3:1 on sand-100 */

  /* ---- Color: brand ---- */
  --navy:     #142B3E;  /* dark bands, footer, header on scroll */
  --navy-2:   #1E3A52;  /* dark band cards */
  --teal:     #0D5C63;  /* links, secondary buttons  7.2:1 on sand-50 */
  --teal-700: #0A474D;  /* hover */
  --teal-100: #DCEDEB;  /* tint */
  --copper:   #A84B1C;  /* primary CTA bg (white text 5.7:1) */
  --copper-700:#86391A; /* hover / pressed (white 8.0:1) */
  --copper-100:#F6E1D2; /* tint */
  --copper-300:#E9A877; /* accent ON navy (7.2:1) — never on sand */
  --sun:      #E3A73F;  /* mosaic accent only, decorative */
  --sky:      #7FB7C0;  /* mosaic accent only, decorative */

  /* ---- Color: status ---- */
  --ok:       #23663A;  --ok-bg:     #DDEFDF;   /* approved, delivered */
  --wait:     #7A4B00;  --wait-bg:   #FBEBC8;   /* waiting on client */
  --late:     #A12A2A;  --late-bg:   #F8DCDA;   /* overdue, error */
  --info:     #0D5C63;  --info-bg:   #DCEDEB;   /* in progress */
  --muted-bg: #ECE4D7;                           /* draft / empty */

  --focus:    #0D5C63;  /* focus ring color (3px + 2px offset) */

  /* ---- Typography ---- */
  --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Base body size is 18px on every screen: readable outdoors for 45–60 y/o owners. */
  --fs-xs:   0.875rem;  /* 14px — legal small print only */
  --fs-sm:   1rem;      /* 16px — captions, chips */
  --fs-base: 1.125rem;  /* 18px — body */
  --fs-md:   1.25rem;   /* 20px — lead text, card titles */
  --fs-lg:   1.5rem;    /* 24px — h3 */
  --fs-xl:   clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);  /* h2 28→38 */
  --fs-2xl:  clamp(2.125rem, 1.4rem + 3vw, 3.5rem);     /* h1 34→56 */
  --fs-price: clamp(2.5rem, 2rem + 2vw, 3.25rem);

  --lh-tight: 1.15;
  --lh-head:  1.2;
  --lh-body:  1.6;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --section-y: clamp(56px, 8vw, 104px);
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1160px;
  --container-narrow: 760px;

  /* ---- Shape ---- */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --tap: 48px;  /* min interactive height (>=44px WCAG 2.5.5) */

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(27, 38, 51, .08), 0 1px 1px rgba(27, 38, 51, .04);
  --shadow-2: 0 6px 18px -6px rgba(27, 38, 51, .18), 0 2px 4px rgba(27, 38, 51, .06);
  --shadow-3: 0 18px 40px -12px rgba(20, 43, 62, .30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  /* ---- Breakpoints (reference; CSS vars can't drive @media) ----
     sm 480px · md 768px · lg 1024px · xl 1280px  */
}

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