/* ============================================================
   DAWSONS LTD — DESIGN SYSTEM
   Global stylesheet. Consumers link THIS one file.
   Import order matters: fonts → tokens → base.
   ============================================================ */

/* inlined from tokens/fonts.css */
/* Build output only. The design system's tokens/fonts.css pulls the webfonts
   from Google; this site self-hosts them instead and loads /fonts/fonts.css
   directly from the document head, so this file is intentionally empty. */
/* inlined from tokens/colors.css */
/* ============================================================
   DAWSONS — COLOUR TOKENS
   Brand red + near-black + a cool steel-grey support palette.
   Base scales first, semantic aliases at the bottom.
   ============================================================ */

:root {
  /* --- Brand red ---------------------------------------------------- */
  --red-50:  #FDF3F3;
  --red-100: #FBE0E1;
  --red-200: #F6BCBE;
  --red-300: #EF8A8E;
  --red-400: #E5535A;
  --red-500: #D81E27;  /* brand red — the logo mark */
  --red-600: #C2161E;
  --red-700: #A0121A;
  --red-800: #7E1117;
  --red-900: #5E1013;

  /* --- Steel (cool neutral) ----------------------------------------- */
  --steel-50:  #F6F8FA;
  --steel-100: #EDF1F5;
  --steel-200: #DCE3EA;
  --steel-300: #C2CCD6;
  --steel-400: #97A4B2;
  --steel-500: #6C7B8C;
  --steel-600: #506072;
  --steel-700: #3C4A5A;
  --steel-800: #2A3441;
  --steel-900: #1A222C;
  --steel-950: #0E141B;

  /* --- Absolutes ---------------------------------------------------- */
  --black: #0C0F13;   /* brand black — backgrounds, headers */
  --ink:   #14181D;   /* slightly lifted black for raised dark surfaces */
  --white: #FFFFFF;

  /* --- Functional --------------------------------------------------- */
  --green-500:  #1F9D55;
  --green-50:   #E9F7EF;
  --amber-500:  #E8A317;
  --amber-50:   #FCF4E2;
  --blue-500:   #2563C9;
  --blue-50:    #E8F0FC;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the raw scale
     ============================================================ */

  /* Brand */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-600);
  --brand-active:   var(--red-700);
  --brand-soft:     var(--red-50);
  --brand-on:       var(--white);   /* text/icon on a brand-red fill */

  /* Page + surfaces (light theme) */
  --color-bg:           var(--white);
  --color-bg-subtle:    var(--steel-50);
  --color-surface:      var(--white);
  --color-surface-2:    var(--steel-50);
  --color-surface-sunk: var(--steel-100);

  /* Dark surfaces (headers, footers, hero overlays) */
  --color-bg-dark:      var(--black);
  --color-surface-dark: var(--ink);

  /* Borders / hairlines */
  --color-border:        var(--steel-200);
  --color-border-strong: var(--steel-300);
  --color-border-dark:   #283038;

  /* Text */
  --text-primary:   var(--steel-950);
  --text-secondary: var(--steel-700);
  --text-muted:     var(--steel-500);
  --text-inverse:   var(--white);
  --text-inverse-muted: var(--steel-400);
  --text-brand:     var(--red-600);
  --text-link:      var(--red-600);

  /* Status */
  --success:    var(--green-500);
  --success-bg: var(--green-50);
  --warning:    var(--amber-500);
  --warning-bg: var(--amber-50);
  --danger:     var(--red-600);
  --danger-bg:  var(--red-50);
  --info:       var(--blue-500);
  --info-bg:    var(--blue-50);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--red-500) 45%, transparent);
}
/* inlined from tokens/typography.css */
/* ============================================================
   DAWSONS — TYPOGRAPHY TOKENS
   Display: Archivo (heavy geometric grotesque)
   Body:    Manrope
   Mono:    IBM Plex Mono (technical: cert numbers, phone, codes)
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* Type scale (rem, 16px base) — fluid display sizes use clamp */
  --fs-display-2xl: clamp(2.75rem, 1.6rem + 5.0vw, 5.0rem);   /* @kind other */
  --fs-display-xl:  clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);  /* @kind other */
  --fs-display-lg:  clamp(1.875rem, 1.4rem + 2.0vw, 2.75rem); /* @kind other */
  --fs-h1: 2.25rem;    /* @kind font */
  --fs-h2: 1.75rem;    /* @kind font */
  --fs-h3: 1.375rem;   /* @kind font */
  --fs-h4: 1.125rem;   /* @kind font */
  --fs-body-lg: 1.125rem;  /* @kind font */
  --fs-body:    1rem;      /* @kind font */
  --fs-body-sm: 0.9375rem; /* @kind font */
  --fs-caption: 0.8125rem; /* @kind font */
  --fs-eyebrow: 0.75rem;   /* @kind font */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.18;  /* @kind font */
  --lh-heading: 1.25;  /* @kind font */
  --lh-body:    1.6;   /* @kind font */
  --lh-relaxed: 1.7;   /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-snug:    -0.01em; /* @kind font */
  --ls-normal:  0;       /* @kind font */
  --ls-wide:    0.04em;  /* @kind font */
  --ls-eyebrow: 0.14em;  /* @kind font */
}
/* inlined from tokens/spacing.css */
/* ============================================================
   DAWSONS — SPACING, RADII, SIZING
   8px base grid.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 7vw, 7rem); /* @kind spacing */

  /* Radii — restrained, corporate. Squarer than playful. */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
}
/* inlined from tokens/effects.css */
/* ============================================================
   DAWSONS — EFFECTS: shadows, borders, transitions
   Corporate, grounded. Soft neutral shadows on light surfaces;
   a tinted brand shadow only for the primary CTA.
   ============================================================ */

:root {
  /* Elevation — cool steel-tinted shadows, never pure black */
  --shadow-xs: 0 1px 2px rgba(20, 30, 41, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 30, 41, 0.06), 0 2px 4px rgba(20, 30, 41, 0.05);
  --shadow-md: 0 4px 10px rgba(20, 30, 41, 0.08), 0 2px 4px rgba(20, 30, 41, 0.05);
  --shadow-lg: 0 12px 28px rgba(20, 30, 41, 0.12), 0 4px 8px rgba(20, 30, 41, 0.06);
  --shadow-xl: 0 24px 50px rgba(20, 30, 41, 0.16), 0 8px 16px rgba(20, 30, 41, 0.08);

  /* Brand-tinted shadow for the primary CTA */
  --shadow-brand: 0 6px 16px rgba(216, 30, 39, 0.28);

  /* Hairline border helpers */
  --border-thin: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* Focus ring (used with outline-offset) */
  --ring: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* A subtle red top-accent rule used across cards/sections */
  --accent-rule: 3px solid var(--brand);
}
/* inlined from tokens/base.css */
/* ============================================================
   DAWSONS — BASE ELEMENTS & TYPE HELPERS
   Lightweight resets + brand defaults. Safe to ship to consumers.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { display: block; max-width: 100%; }

/* --- Type utility classes ----------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.display-2xl { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-xl  { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-lg  { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-display-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-snug); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* --- Layout helpers ----------------------------------------------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.container-wide { max-width: var(--container-wide); }

/* Brand text highlight */
.text-brand { color: var(--text-brand); }