/* ==========================================================================
   Louis group sites — "Swiss Editorial" (inherited from the parent company
   site), one brand accent per site (pages/theme.css). IDENTICAL in every app.
   01-tokens.css: fonts, tokens, reset, base type, utilities.

   Load order: the layouts call `stylesheet_link_tag :app`, which links every
   .css file under app/assets/ sorted by logical path:
     01-tokens.css → 02-components.css → 03-workspace.css → pages/*.css
   Digits sort before letters, so page files (pages/<name>.css) always load last.
   Docs: docs/redesign/design/DESIGN_SYSTEM.md
   ========================================================================== */

/* ---------- Fonts: Switzer 400 / 400 italic / 500 (ITF Free Font License,
   see app/assets/fonts/switzer-license-ITF-FFL.txt) ---------------------- */
@font-face { font-family: "Switzer"; src: url("/assets/switzer-400-511bc9c5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/switzer-400-italic-78077e00.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/switzer-500-43309e60.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens -------------------------------------------------------
   Brand colours (--accent*, --coal …) are set per site at the top of
   pages/theme.css; everything else here is shared by the group's sites.
   Docs for page authors: tmp/design-system.md
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour: ink on white paper, one brand accent (overridden in pages/theme.css). */
  --accent: #e94e1b;
  --accent-ink: #e94e1b;   /* accent text: labels, links on hover */
  --accent-dark: #c93f12;  /* hover / pressed */
  --accent-soft: #fdeee8;  /* tinted panels */
  --on-accent: #ffffff;
  --paper: #ffffff;
  --ink: #161616;          /* 18:1. Headings, body, primary button, focus ring */
  --ink-2: #474747;        /* 9.4:1. Lead paragraphs and secondary body copy */
  --grey-text: #626262;    /* 6.1:1. Small secondary text: meta, captions, hints */
  --grey: #8a8a8a;         /* 3.5:1. Display grey: 24px and up ONLY (AA large) */
  --rule: #e4e4e1;         /* hairlines between rows, lists and cards */
  --rule-strong: #cfcfcb;  /* hairlines that must hold up (inputs, tables) */
  --field: #f3f3f1;        /* the one surface: quiet button, cards, placeholders */
  --signal: var(--accent); /* the 24/7 dot and small marks */
  --danger: #b42318;       /* form errors only (6.6:1) */
  --scrim: var(--paper);
  --img-filter: none;

  /* Type: one modular scale (≈1.25 on phones → ≈1.33 on desktop).
     Sizes at 390px → 1440px. Weights: 400 body, 500 everything that leads. */
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-display: clamp(2.5rem, 1.45rem + 3.9vw, 4.5rem);     /* 40 → 72  home statement */
  --t-hero: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);        /* 36 → 56  page titles, short statements */
  --t-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);          /* 28 → 40  section heads, CTA headline */
  --t-l: clamp(1.375rem, 1.1rem + 0.95vw, 1.875rem);       /* 22 → 30  sub-heads, long statements */
  --t-m: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);      /* 18 → 21  card titles, FAQ questions */
  --t-lead: clamp(1.125rem, 1.03rem + 0.35vw, 1.3125rem);  /* 18 → 21  lead paragraphs (400, ink-2) */
  --t-read: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);  /* 17 → 18  reading pages */
  --t-body: 1rem;                                          /* 16       marketing body */
  --t-s: 0.875rem;                                         /* 14       meta, labels, captions */
  --t-xs: 0.75rem;                                         /* 12       tags (uppercase) */
  --lh-tight: 1.04;        /* display */
  --lh-hero: 1.08;         /* hero / page titles */
  --lh-xl: 1.14;
  --lh-head: 1.22;         /* l */
  --lh-m: 1.32;
  --lh-body: 1.55;
  --lh-read: 1.68;
  --lh-s: 1.45;
  --track-display: -0.028em;
  --track-hero: -0.022em;
  --track-xl: -0.018em;
  --track-head: -0.01em;
  --track-body: 0.003em;
  --track-caps: 0.07em;    /* uppercase tags */

  /* Measure */
  --measure: 40rem;        /* reading column ≈ 66ch at 18px */
  --measure-lead: 36rem;   /* lead paragraphs ≈ 60ch at 20px */
  --measure-text: 34rem;   /* short body copy next to a head */

  /* Space: 4px base. Section rhythm and the head→content gap are the only two
     vertical rhythms pages should need. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --row-y: clamp(32px, 3.9vw, 56px);        /* padding above AND below each row: 64px → 112px between rows */
  --row-end: var(--row-y);                  /* legacy name */
  --band-y: clamp(56px, 6.2vw, 96px);       /* padding inside coloured bands (stats, dark, CTA) */
  --head-gap: clamp(28px, 3vw, 44px);       /* row head → its content */
  --stack-gap: clamp(40px, 4vw, 56px);      /* between rows of cards in a grid */

  /* Grid: 12 columns (4 below 768px). The outer gutter grows from 16px on
     phones to 48px on large desktops, and content stops at --max-width, centred. */
  --gutter: clamp(16px, 3.2vw, 48px);
  --max-width: 1344px;     /* 1440px page with 48px gutters, centred */
  --col-gap: clamp(16px, 1.7vw, 24px);
  --header-h: 76px;

  --radius: 6px;           /* images and buttons */
  --radius-l: 12px;        /* panels, dropdowns */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 320ms;
}
@media (max-width: 63.99rem) { :root { --header-h: 64px; } }


/* ---------- Reset & base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100dvh;
  background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); font-weight: 400;
  line-height: var(--lh-body); letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 500; letter-spacing: var(--track-head); line-height: var(--lh-head); text-wrap: balance; }
/* Sensible defaults for unclassed headings; components set their own sizes. */
h1 { font-size: var(--t-xl); line-height: var(--lh-xl); letter-spacing: var(--track-xl); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
img { filter: var(--img-filter); }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }
small { font-size: var(--t-s); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-7); }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
kbd { font: inherit; font-size: var(--t-s); color: var(--grey-text); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
[hidden] { display: none !important; }
main:focus { outline: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
}
.skip-link:focus-visible { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Type classes ------------------------------------------------- */
.t-display { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.t-hero { font-size: var(--t-hero); line-height: var(--lh-hero); font-weight: 500; letter-spacing: var(--track-hero); text-wrap: balance; }
.t-xl   { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 500; letter-spacing: var(--track-xl); text-wrap: balance; }
.t-l    { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.t-m    { font-size: var(--t-m); line-height: var(--lh-m); font-weight: 500; letter-spacing: var(--track-head); }
.t-lead { font-size: var(--t-lead); line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--ink-2); max-width: var(--measure-lead); text-wrap: pretty; }
.t-s    { font-size: var(--t-s); line-height: var(--lh-s); }
.t-caps { font-size: var(--t-xs); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }

/* ---------- Utilities ---------------------------------------------------- */
.grey { color: var(--grey); }                 /* display sizes only */
.ink-2 { color: var(--ink-2); }
.muted, .text-muted, .text-secondary { color: var(--grey-text); }
.text-sm { font-size: var(--t-s); }
.tabular { font-variant-numeric: tabular-nums; }
.mt-4 { margin-block-start: var(--s-4); }
.mt-6 { margin-block-start: var(--s-6); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}