/* ============================================================
   Arup Design System — Colors & Type tokens
   ============================================================ */

/* Webfonts ---------------------------------------------------- */
/* VERIFIED from the official Arup PowerPoint templates: the brand
   theme ("Arup Fonts") sets BOTH major and minor fonts to
   Times New Roman. Arup's deck + document typography is therefore a
   single transitional serif used throughout (headings, body, captions),
   with weight + the red accent — not size-and-family — carrying
   hierarchy. Times New Roman is a system font, so no webfont is needed
   for fidelity; we additionally load Source Serif 4 as a higher-quality
   screen serif and Inter for dense product UI where a sans reads better
   (e.g. SharePoint chrome). Set --font-deck to Times New Roman when you
   need to match a real Arup .pptx exactly. */
/* Webfonts are vendored locally in assets/fonts/fonts.css — no network
   request is ever made. (A Google Fonts @import used to live here; it was
   removed so the app stays fully offline and never calls out.) */

:root {
  /* ---------- Brand color ----------
     VERIFIED official Arup red from the brand theme colour scheme
     (a:accent1 / a:dk2 = E61E28) inside both supplied .pptx files
     and the official wordmark SVG fill. */
  --arup-red:        #E61E28;       /* primary brand red (official) */
  --arup-red-dark:   #BE0C1A;       /* hover / press */
  --arup-red-tint:   #FCE7E9;       /* subtle red wash */
  --arup-red-rgb:    230,30,40;       /* channels of --arup-red, for rgba() washes */
  --arup-red-text:   #7A0014;         /* dark red text that clears WCAG AA on --arup-red-tint */

  /* ---------- Secondary accent palette ----------
     VERIFIED from the brand theme (a:accent2..6 + dk2). Arup pairs the
     red with five further saturated hues, used for data viz, diagram
     coding, section/sector tagging and the occasional accent moment.
     Use ONE accent at a time alongside red; never a rainbow. */
  --accent-purple:  #7D4196;        /* accent2 */
  --accent-blue:    #005AAA;        /* accent3 */
  --accent-teal:    #32A4A0;        /* accent4 */
  --accent-magenta: #C83C96;        /* accent5 */
  --accent-green:   #4BA046;        /* accent6 */

  /* ---------- Link colours (from brand theme) ----------
     hlink = 606062 (a mid grey, NOT red), folHlink = C9C9CA. */
  --link:          #606062;
  --link-visited:  #C9C9CA;

  /* ---------- Neutrals (SharePoint nav + editorial chrome) ---------- */
  --ink-900:  #1A1A1A;   /* near-black body text */
  --ink-800:  #2B2B2B;   /* dark nav bar */
  --ink-700:  #4A4A4A;
  --ink-600:  #666666;   /* secondary text */
  --ink-500:  #8A8A8A;
  --ink-400:  #B5B5B5;
  --ink-300:  #D6D6D6;   /* hairline borders */
  --ink-200:  #E8E8E8;   /* card / panel fill */
  --ink-100:  #F2F2F2;   /* page background, gray nav strip */
  --ink-050:  #F8F8F8;
  --paper:    #FFFFFF;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* body */
  --fg-3: var(--ink-600);   /* secondary / meta */
  --fg-4: #767676;          /* tertiary / disabled — darkened from ink-500 (#8A8A8A, 3.45:1) to clear WCAG AA 4.5:1 on white */
  --fg-on-red: var(--paper);

  --bg-page:    var(--paper);
  --bg-subtle:  var(--ink-100);
  --bg-muted:   var(--ink-200);
  --bg-inverse: var(--ink-800);

  --border-1: var(--ink-300);
  --border-2: var(--ink-200);

  /* ---------- Status / semantic ---------- */
  --success: #1F7A3A;
  --warning: #8A5A00;   /* darkened from #C9881C to clear WCAG AA on white + tints (carries at-risk/over-budget signals) */
  --danger:  var(--arup-red);
  --info:    #1F5AA8;

  /* ---------- Type families ----------
     --font-deck reproduces a real Arup .pptx (Times New Roman everywhere).
     --font-serif is the higher-quality screen serif for web headlines.
     --font-sans is reserved for dense product UI chrome. */
  --font-deck:  'Times New Roman', Times, serif;
  --font-serif: 'Source Serif 4', 'Times New Roman', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Display wordmark: the Arup logotype is itself an image asset;
     the closest matching display serif we use for editorial titles
     is a high-contrast didone/transitional. */
  --font-display: 'Source Serif 4', 'Times New Roman', serif;

  /* ---------- Type scale (editorial-leaning) ---------- */
  --fs-display: 72px;   /* hero / cover */
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;   /* uppercase label */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2; /* @kind other */
  --lh-normal:  1.45; /* @kind other */
  --lh-loose:   1.6; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-normal:   0; /* @kind other */
  --ls-wide:     0.08em;     /* @kind other */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ----------
     Arup chrome is sharp / squared. UI cards use 0–4px max. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---------- Shadows ----------
     Mostly avoided. A single soft elevation is used for menus. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.12);

  /* ---------- Layout ---------- */
  --max-w-text: 68ch;
  --max-w-page: 1280px;
  --grid-gutter: 24px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */

  /* ---------- Accent bar ----------
     Iconic Arup motif: short red bar under nav tiles & section
     headings. */
  --accent-bar-h: 3px;
  --accent-bar-color: var(--arup-red);
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { color: var(--fg-1); background: var(--bg-page); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}

/* Headings — editorial serif. */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Eyebrow — uppercase tag above titles. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
}

/* Body */
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 400;
}

small, .small { font-size: var(--fs-small); color: var(--fg-3); }
.caption     { font-size: var(--fs-caption); color: var(--fg-3); }

/* Links */
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-400);
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--arup-red);
  text-decoration-color: var(--arup-red);
}

/* Mono / code */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Quote — pulled out, serif italic */
blockquote, .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--arup-red);
  padding-left: var(--sp-6);
}

/* Section accent bar — used under nav tiles, hero headings */
.accent-bar {
  display: block;
  width: 48px;
  height: var(--accent-bar-h);
  background: var(--accent-bar-color);
}

/* ============================================================
   Utilities
   ============================================================ */
.surface       { background: var(--bg-page); border: 1px solid var(--border-2); }
.surface-muted { background: var(--bg-subtle); }
.hairline      { border-top: 1px solid var(--border-1); }

/* ============================================================
   Brand motif: the engineering grid
   ------------------------------------------------------------
   The Arup deck templates use a thin red "graph paper" grid as a
   background motif (a nod to engineering drawings), typically faded
   out toward one edge. Apply .arup-grid to any panel; tune the cell
   size with --grid-cell. Pair with a white-to-transparent mask for
   the classic fade. */
.arup-grid {
  --grid-cell: 48px;
  background-image:
    linear-gradient(to right, rgba(230,30,40,0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,30,40,0.28) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.arup-grid--fade {
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
}

/* ============================================================
   Deck / document type spec  (matches the official .pptx styles)
   ------------------------------------------------------------
   The Arup template defines these named paragraph styles, all set in
   the deck serif. Hierarchy is carried by SIZE + WEIGHT + the red
   accent, never by switching family. Sizes are the template's pt
   values; use them 1:1 when authoring slides/docs. */
.deck-main        { font-family: var(--font-deck); font-size: 28px; line-height: 1.25; color: var(--fg-1); }
.deck-main-red    { font-family: var(--font-deck); font-size: 28px; line-height: 1.25; color: var(--arup-red); }
.deck-small       { font-family: var(--font-deck); font-size: 20px; line-height: 1.3;  color: var(--fg-1); }
.deck-small-red   { font-family: var(--font-deck); font-size: 20px; line-height: 1.3;  color: var(--arup-red); }
.deck-subheading  { font-family: var(--font-deck); font-size: 16px; font-weight: 700; color: var(--arup-red); }
.deck-supporting  { font-family: var(--font-deck); font-size: 16px; color: var(--fg-1); }
.deck-diagram     { font-family: var(--font-deck); font-size: 12px; color: var(--fg-1); }