/* Qavah Legal Solutions: design tokens
   Palette: Bronze & Linen. Font: Outfit throughout (the wordmark typeface), SIL Open Font Licence. */

:root {
  /* Colour: semantic roles. Components use these, never raw hex. */
  --q-accent:        #A28361; /* Bronze: logo dot, large display text, icons, illustration */
  --q-accent-deep:   #7D6142; /* Bronze Deep: button fills, links, small accent text */
  --q-bg:            #F7F3EC; /* Linen: page background */
  --q-surface:       #FFFFFF; /* cards on the page background */
  --q-secondary:     #6F8B78; /* Eucalypt: secondary accent, ticks, illustration (decorative only, not for text) */
  --q-neutral:       #DCD3C6; /* Stone: dividers, card fills, table shading */
  --q-neutral-soft:  #EEE8DF; /* subtle fills, hover rows */
  --q-ink:           #333333; /* Charcoal: text, wordmark */
  --q-ink-soft:      #4C4842; /* secondary text (AA on Linen) */
  --q-on-accent:     #FFFFFF; /* text on accent-deep fills */
  --q-focus:         #333333;

  /* Typography */
  --q-font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --q-font-body:    "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Type scale (fluid, mobile to desktop) */
  --q-text-xs:   0.8125rem;  /* 13px: legal footnotes only */
  --q-text-sm:   0.9375rem;  /* 15px */
  --q-text-base: 1.0625rem;  /* 17px body */
  --q-text-lg:   1.25rem;    /* 20px lead */
  --q-text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* H3 */
  --q-text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* H2 */
  --q-text-3xl:  clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);     /* H1 / hero */
  --q-leading-tight: 1.1;
  --q-leading-snug:  1.3;
  --q-leading-body:  1.6;
  --q-tracking-display: -0.02em;

  /* Spacing (4px base) */
  --q-space-1: 4px;  --q-space-2: 8px;  --q-space-3: 12px; --q-space-4: 16px;
  --q-space-5: 24px; --q-space-6: 32px; --q-space-7: 48px; --q-space-8: 64px; --q-space-9: 96px;

  /* Shape */
  --q-radius-sm: 8px;
  --q-radius-md: 14px;   /* buttons, inputs */
  --q-radius-lg: 22px;   /* cards, images */
  --q-radius-pill: 999px;

  /* Elevation: soft and warm, never grey-black */
  --q-shadow-sm: 0 1px 2px rgb(60 45 30 / 0.06), 0 1px 1px rgb(60 45 30 / 0.04);
  --q-shadow-md: 0 8px 24px -8px rgb(46 30 20 / 0.14);

  /* Layout */
  --q-container: 1180px;
  --q-gutter: 16px;          /* mobile side gutter */
  --q-gutter-lg: 32px;

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

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