/*
  Bike Wales Digital Hire Agreement — Design Tokens
  ---------------------------------------------------
  Palette: deep Welsh-forest greens on warm stone neutrals, with a single
  earthy amber reserved for warnings. Typography pairs a geometric display
  face (Space Grotesk) with a highly-legible body face (Inter) and a
  monospace utility face (IBM Plex Mono) for agreement numbers, dates and
  other data that benefits from fixed-width alignment on a form.
*/

:root {
  /* ---- Colour: greens ---- */
  --color-forest-950: #14261d;   /* app-bar text, deep ink-green */
  --color-forest-800: #1f4536;   /* primary brand green */
  --color-forest-700: #285a45;   /* primary hover/active */
  --color-moss-600:   #4f7a5b;   /* secondary buttons, links */
  --color-moss-400:   #7fa88c;   /* borders, subtle accents */
  --color-moss-200:   #cfe0d4;   /* tinted backgrounds, chips */

  /* ---- Colour: neutrals (warm stone, not cream) ---- */
  --color-stone-50:  #faf9f6;    /* card surface */
  --color-stone-100: #f1efe9;    /* page background */
  --color-stone-200: #e4e0d6;    /* section borders/dividers */
  --color-stone-400: #726b5d;    /* placeholder text, disabled, borders — WCAG AA (5.3:1 on white) */
  --color-slate-700: #4a4a42;    /* secondary text */
  --color-slate-900: #22271f;    /* primary text ink */

  /* ---- Colour: signal ---- */
  --color-amber-600: #b5762a;    /* warnings on dark backgrounds (e.g. offline status dot) */
  --color-amber-700: #976022;    /* warning icon/border on the light amber tint — WCAG AA (4.2:1) */
  --color-amber-100: #f3e3cd;    /* warning background tint */
  --color-red-700:   #a13a2f;    /* validation errors */
  --color-red-100:   #f4e0dc;    /* error background tint */
  --color-white:     #ffffff;

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px — deliberately larger base for tablet legibility */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2rem;       /* 32px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(20, 38, 29, 0.06), 0 6px 20px rgba(20, 38, 29, 0.08);
  --shadow-raised: 0 2px 4px rgba(20, 38, 29, 0.10), 0 12px 28px rgba(20, 38, 29, 0.14);

  /* ---- Touch targets ---- */
  --tap-target-min: 48px;

  /* ---- Layout ---- */
  --content-max-width: 920px;
  --app-bar-height: 64px;
  --action-bar-height: 84px;

  /*
    Signature element: a quiet topographic contour-line motif, evoking the
    Welsh trail maps Bike Wales customers ride. Used sparingly — once in the
    app-bar, once behind the signature card — never as general decoration.
  */
  --contour-motif: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='400' height='240' viewBox='0 0 400 240'>\
<g fill='none' stroke='%23cfe0d4' stroke-width='1.5' opacity='0.35'>\
<path d='M-10 40 C 60 10, 120 70, 190 30 S 320 10, 410 50'/>\
<path d='M-10 75 C 70 45, 130 105, 200 65 S 330 45, 410 85'/>\
<path d='M-10 110 C 80 80, 140 140, 210 100 S 340 80, 410 120'/>\
<path d='M-10 145 C 90 115, 150 175, 220 135 S 350 115, 410 155'/>\
<path d='M-10 180 C 100 150, 160 210, 230 170 S 360 150, 410 190'/>\
</g>\
</svg>");
}