/* ============================================================ AERL Documentation — Design Tokens Mirrors aerl.com.au theme: • Single accent — AERL Orange (#f2a332) on a monochrome ramp • Type, all self-hosted static weights (assets/fonts, OFL; no third-party font requests): Inter body and UI --font-sans IBM Plex Mono code, register values --font-mono Plus Jakarta Sans display face (Trace) --font-brand JetBrains Mono micro-labels (Trace) --font-label • Variables match aer-website/src/app/globals.css aliases (--primary-orange, --dark-orange, --light-orange, --light-grey, --dark-grey) ============================================================ */ /* IBM Plex Mono: Google Fonts' own static files and subsets, self-hosted, so documents render as they did with the Google import. */ @import url("assets/fonts/ibm-plex-mono/ibm-plex-mono.css"); /* Plus Jakarta Sans: display face of the booklet and brochure (Trace) layouts and the co-brand documents. Fonts load only when a rule uses them. */ @import url("assets/fonts/plus-jakarta-sans/plus-jakarta-sans.css"); /* Inter is self-hosted as static, hinted weights (assets/fonts/inter, from the official rsms/inter v4.1 release). Google Fonts serves Inter as a variable font, which Chromium's print-to-PDF embeds as unhinted Type 3 glyphs: thin and fuzzy in PDF viewers, and missing symbols such as the approx sign and arrows that the Google subset drops. Static files embed as TrueType and render crisply. Do not switch back to the Google import. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/fonts/inter/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: block; src: url("assets/fonts/inter/Inter-Italic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: block; src: url("assets/fonts/inter/Inter-MediumItalic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: block; src: url("assets/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: block; src: url("assets/fonts/inter/Inter-BoldItalic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: block; src: url("assets/fonts/inter/Inter-Medium.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: block; src: url("assets/fonts/inter/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: block; src: url("assets/fonts/inter/Inter-Bold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: block; src: url("assets/fonts/inter/Inter-ExtraBold.woff2") format("woff2"); } /* JetBrains Mono: static 400/500/600 instances (assets/fonts/jetbrains-mono, OFL) for AERL Cloud's micro-labels and readouts in the booklet/brochure layouts. Static, not the variable font: Chromium embeds variable fonts in PDFs as Type 3. Loads only where a rule uses --font-label. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/fonts/jetbrains-mono/JetBrainsMono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: block; src: url("assets/fonts/jetbrains-mono/JetBrainsMono-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: block; src: url("assets/fonts/jetbrains-mono/JetBrainsMono-600.woff2") format("woff2"); } /* Legibility: tailed lower-case l (cv05) and serifed capital I (cv08) so I / l / 1 are distinguishable in part numbers, flags and register names. */ html { font-feature-settings: "cv05", "cv08"; } :root { /* ---------- Brand: AERL Orange (50–950 ramp) ---------- */ --primary-50: #fef7ec; --primary-100: #fdedce; --primary-200: #fbd99d; --primary-300: #f9c06c; --primary-400: #f6c37b; /* light variant */ --primary-500: #f2a332; /* DEFAULT — AERL Orange */ --primary-600: #d08217; /* hover / dark variant */ --primary-700: #a96612; --primary-800: #804d0e; --primary-900: #5e390a; --primary-950: #341f05; --primary-orange: var(--primary-500); --dark-orange: var(--primary-600); --light-orange: var(--primary-400); /* ---------- Neutrals (custom monochrome ramp, no Tailwind defaults) ---------- */ --gray-50: #F8F8F8; --gray-100: #EDEDED; --gray-200: #DCDCDC; --gray-300: #BFBFBF; --gray-400: #9A9A9A; --gray-500: #767676; --gray-600: #545454; --gray-700: #3A3A3A; --gray-800: #222222; --gray-900: #111111; --gray-950: #0A0A0A; --white: #ffffff; --black: #000000; /* legacy aliases — match aer-website globals.css */ --light-grey: var(--gray-100); --dark-grey: var(--gray-700); /* ---------- Semantic foreground / background ---------- */ --fg-1: var(--gray-900); /* body text — #111 */ --fg-2: var(--gray-700); /* secondary copy */ --fg-3: #5f5f5f; /* muted / captions: 6.4:1 on white (gray-500 was 4.5:1, failing AA on gray-50) */ --fg-inverse: var(--white); --fg-accent: #985b10; /* orange TEXT: >= 4.6:1 on white and every tint used (gray-50/100, primary-50, danger-bg). primary-600/700 are fills and borders only */ --bg-canvas: var(--gray-50); /* default body — #F8F8F8 */ --bg-surface: var(--white); /* cards, tables, callouts */ --bg-sunken: var(--gray-100); --bg-inverse: var(--gray-950); /* ---------- Borders & rules ---------- */ --border-subtle: var(--gray-200); --border-strong: var(--gray-300); --border-rule: var(--gray-900); --border-accent: var(--primary-500); /* ---------- Status / callouts (used in manuals) ---------- */ --status-info: #2563eb; --status-info-bg: #eff4ff; --status-warn: var(--fg-accent); /* text colour for warn labels; primary-600 was 3:1 */ --status-warn-bg: var(--primary-50); --status-danger: #b42318; --status-danger-bg: #fef3f2; --status-ok: #027948; --status-ok-bg: #ecfdf3; /* ---------- Type system ---------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Inter after Plex: glyphs Plex lacks (e.g. the approx sign) fall back to the embedded Inter instead of Menlo/Consolas, identically on any OS. */ --font-mono: "IBM Plex Mono", "Inter", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-display: "Inter", sans-serif; /* Brand display face: covers, chapter numerals, big figures (booklet.css, brochure.css). Latin subset only; anything else falls through to Inter. */ --font-brand: "Plus Jakarta Sans", "Inter", sans-serif; /* Micro-labels and numerals in the booklet/brochure layouts (AERL Cloud's mono). Glyphs the latin subset lacks fall back to Inter. */ --font-label: "JetBrains Mono", "Inter", monospace; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-64: 4rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* ---------- Spacing & radii ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ---------- Elevation ---------- */ --shadow-sm: 0 1px 2px rgba(17,17,17,0.06); --shadow-md: 0 4px 12px rgba(17,17,17,0.08); --shadow-lg: 0 10px 28px rgba(17,17,17,0.10); --shadow-xl: 0 22px 48px rgba(17,17,17,0.14); /* ---------- Layout ---------- */ --container-max: 80rem; /* 1280px (Tailwind max-w-7xl) */ --doc-page-max: 820px; /* A4-ish printable column */ --section-py: clamp(64px, 8vw, 112px); }