/* Design tokens for Cre8tive Carpets & Flooring.
   Colours come from the logo (navy and blue); every text/background pair used is AA or better. */
:root {
  /* Colour */
  --colour-ink: #141028;           /* logo navy: text, footer, patchwork seams (18.5:1 on white) */
  --colour-brand: #0372ad;         /* logo blue: buttons and links (5.2:1 with white) */
  --colour-brand-deep: #0b2a48;    /* deep blue: hovers and the call-to-action band */
  --colour-paper: #ffffff;
  --colour-stone: #eef1f4;         /* cool granite grey for alternate sections */
  --colour-muted: #4d5766;         /* secondary text: 7.3:1 on white, 6.4:1 on stone */
  --colour-line: #d3d9e0;          /* decorative rules only */
  --colour-field: #6b7684;         /* form field borders: 4.6:1 on white */
  --colour-on-dark: #ffffff;
  --colour-on-dark-muted: #c9d3e0; /* 12:1 on navy, 9.6:1 on deep blue */
  --colour-error: #b3261e;         /* 6.6:1 on white */
  --colour-success: #1e7a46;       /* 5.3:1 on white */
  --colour-open: #2e9d5b;          /* status dot, always paired with text */
  --colour-closed: #8a94a3;

  /* Type: Lexend for headings and interface, Atkinson Hyperlegible Next for reading */
  --font-display: "Lexend", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.875rem;                                  /* 14 */
  --text-s: 1rem;                                       /* 16 */
  --text-m: 1.125rem;                                   /* 18, body */
  --text-l: 1.3125rem;                                  /* 21 */
  --text-xl: 1.5rem;                                    /* 24 */
  --text-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);  /* 24 to 36 */
  --text-3xl: clamp(2.25rem, 1.85rem + 1.6vw, 3rem);    /* 36 to 48 */
  --text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);    /* 36 to 60 */
  --leading-body: 1.6;
  --leading-snug: 1.3;
  --leading-tight: 1.1;
  --measure: 65ch;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --wrap: 75rem;
  --wrap-narrow: 46rem;
  --header-height: 4.5rem;
  --action-bar-height: 4rem;

  /* Shape */
  --radius-s: 4px;
  --radius-m: 8px;
  --seam: 6px;
  --shadow-pop: 0 12px 32px rgba(20, 16, 40, 0.16);
  --focus-ring: 3px solid var(--colour-brand);
  --shadow-bar: 0 -6px 20px rgba(20, 16, 40, 0.08);
  --glow-open: 0 0 0 4px rgba(46, 157, 91, 0.18);
  --colour-scrim: rgba(20, 16, 40, 0.85);         /* behind the photo viewer */
  --colour-rule-on-dark: rgba(255, 255, 255, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-s: 150ms;
  --duration-m: 300ms;
  --duration-l: 650ms;
}