/* =========================================================
   Arrowline Design System — Colors & Type
   ========================================================= */

/* ---------- Fonts ----------
   Volksans only: Semibold (display) + Regular (body). Licensed web fonts live
   in fonts/ as subsetted .woff2.

   There is deliberately no web-font fallback. Work Sans used to be loaded from
   Google Fonts as a "closest free match", but nothing ever asked for it on
   purpose — it sat second in the stacks below and rendered only if Volksans
   failed. That cost every visitor an unconditional request to Google (and so
   their IP address) to insure against a case that should be rare. `system-ui`
   covers that case instead.
*/
@font-face {
  font-family: 'Volksans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/volksans-Normal.woff2') format('woff2'),
       local('Volksans Regular');
}

@font-face {
  font-family: 'Volksans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/volksans-SemiBold.woff2') format('woff2'),
       local('Volksans Semibold');
}

:root {
  /* ---------- Brand colors ---------- */
  --color-red:        #F23F3F;  /* Primary Red */
  --color-red-dark:   #BF2E3F;  /* Dark Red */

  --color-ink:        #28302D;  /* near-black, slightly cool */
  --color-stone:      #E4DEDC;  /* warm light neutral */
  --color-paracetamol-white: #FFF4ED;  /* warm off-white — alt-section surface, inverse fg */
  --color-container-grey: #C2BFB8;  /* cool neutral, legacy — retained for reference */
  --color-white:      #FFFFFF;

  /* ---------- Semantic surface tokens ---------- */
  --bg:               var(--color-white);   /* default page bg */
  --bg-alt:           var(--color-stone);   /* alt section / image placeholders */
  --bg-accent:        var(--color-paracetamol-white);   /* alt-section surface */
  --bg-inverse:       var(--color-ink);     /* footer / contrast */
  --surface:          var(--color-white);

  /* ---------- Foreground tokens ---------- */
  --fg:               var(--color-ink);
  --fg-muted:         color-mix(in oklab, var(--color-ink) 65%, transparent);
  --fg-subtle:        color-mix(in oklab, var(--color-ink) 45%, transparent);
  --fg-inverse:       var(--color-paracetamol-white);

  /* ---------- Accent ---------- */
  --accent:           var(--color-red);
  --accent-hover:     var(--color-red-dark);
  --on-accent:        var(--color-white);

  /* ---------- Type families ---------- */
  --font-display:     'Volksans', system-ui, sans-serif;
  --font-body:        'Volksans', system-ui, sans-serif;

  --weight-regular:   400;
  --weight-semibold:  600;

  /* ---------- Type scale (editorial / airy) ---------- */
  --text-xs:          0.75rem;    /* 12 — micro labels */
  --text-sm:          0.875rem;   /* 14 — captions, meta */
  --text-base:        1rem;       /* 16 — body */
  --text-lg:          1.125rem;   /* 18 — lead body */
  --text-xl:          1.5rem;     /* 24 — small heading */
  --text-2xl:         2rem;       /* 32 — h3 */
  --text-3xl:         3rem;       /* 48 — h2 */
  --text-4xl:         4.5rem;     /* 72 — h1 */
  --text-display:     7rem;       /* 112 — display, hero */

  /* ---------- Line heights ---------- */
  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-normal:        1.5;
  --lh-relaxed:       1.7;

  /* ---------- Letter spacing ---------- */
  --track-tight:      -0.02em;
  --track-normal:     0;
  --track-wide:       0.08em;

  /* ---------- Spacing scale (airy) ---------- */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;
  --space-8:          64px;
  --space-9:          96px;
  --space-10:         128px;
  --space-11:         192px;
  --space-12:         256px;

  /* ---------- Radii ---------- */
  --radius:           4px;     /* default */
  --radius-lg:        8px;
  --radius-pill:      999px;

  /* ---------- Layout ---------- */
  --max-width:        1440px;
  --gutter:           48px;

  /* ---------- Motion ---------- */
  --ease:             cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:    160ms;
  --duration:         240ms;
  --duration-slow:    480ms;
}

/* ---------- Base ---------- */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-weight: var(--weight-regular);
}

/* ---------- Semantic type ---------- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* Rich-text (Portable Text) container. Applied alongside a copy class (e.g.
   `class="section-lead rich"`) on any element that renders a CMS `localeBlock`
   field via the `pt` filter. The container keeps its own font/size/colour; the
   inner <p>/<strong>/<a> the filter emits inherit it. The global `p { margin: 0 }`
   reset above means a single paragraph behaves exactly as the old single <p>,
   so only inter-paragraph rhythm and the brand's semibold weight are restored. */
.rich > p + p { margin-top: 0.9em; }
.rich strong { font-weight: var(--weight-semibold); }

.caption, small {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease);
}

a:hover {
  opacity: 0.6;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}