/* Redrob Group Design System 2026 — generated from tokens.json */
:root, [data-theme="light"] {
  --blue-1: #eef4ff; /* Lightest brand tint. Page washes and hover fills on light surfaces. */
  --blue-2: #d9e6ff; /* Brand tint. Selected rows, subtle brand backgrounds. */
  --blue-3: #bad2ff; /* Brand tint. Borders on brand-tinted surfaces, light gradient end. */
  --blue-4: #8aafff; /* Light brand. Disabled brand fills; brand text on dark surfaces. */
  --blue-5: #507fff; /* Brand, lightened. The action color on dark surfaces. */
  --blue-6: #2b52ff; /* Redrob Blue, the primary brand color. Pantone 2132 C. Primary actions, links, brand fills. */
  --blue-7: #1733d5; /* Brand, deepened. Pressed and hover state of Redrob Blue on light surfaces. */
  --blue-8: #09209c; /* Deep brand. Brand text on light tints where more weight is needed. */
  --blue-9: #061460; /* Deep brand. Dark brand surfaces. */
  --blue-10: #030c34; /* Darkest brand. Deep gradient end, dark brand backgrounds. */
  --gray-1: #f8f9fb; /* Lightest neutral. Raised surfaces and page background on light. */
  --gray-2: #eff1f4; /* Neutral. Sunken surfaces, table stripes on light. */
  --gray-3: #dfe2e8; /* Neutral. Subtle borders and dividers on light. */
  --gray-4: #cbcfd7; /* Neutral. Strong borders, disabled control outlines on light. */
  --gray-5: #aab0bb; /* Mid neutral. Disabled text, icons on dark surfaces. */
  --gray-6: #7c8390; /* Mid neutral. 3.81:1 on white, so it is for placeholders, disabled states, captions and 24px+ text - never essential body copy on a light ground. */
  --gray-7: #576071; /* Neutral. Secondary text on light surfaces. */
  --gray-8: #292e37; /* Dark neutral. Borders and sunken surfaces on dark. */
  --gray-9: #141719; /* Darkest neutral. Raised surfaces on dark. */
  --redrob-black: #0a0b0c; /* Redrob Black. The brand's ink and the dark-theme page background. */
  --redrob-white: #ffffff; /* Redrob White. Light-theme page background and ink on brand fills. */
  --accent-teal-1: #dcfffe; /* Teal 1: lightest tint - backgrounds. */
  --accent-teal-2: #b9fffd; /* Teal 2: tint - subtle fills and borders. */
  --accent-teal-3: #6ff4f0; /* Teal 3: base - the family's identity value. */
  --accent-teal-4: #00b5c2; /* Teal 4: deep - text and icons on tints. */
  --accent-teal-5: #006a7a; /* Teal 5: deepest - dark surfaces and high-contrast text. */
  --accent-sky-1: #e4f0ff; /* Blue 1: lightest tint - backgrounds. */
  --accent-sky-2: #bad9ff; /* Blue 2: tint - subtle fills and borders. */
  --accent-sky-3: #2f8dff; /* Blue 3: base - the family's identity value. */
  --accent-sky-4: #0e51b6; /* Blue 4: deep - text and icons on tints. */
  --accent-sky-5: #002a68; /* Blue 5: deepest - dark surfaces and high-contrast text. */
  --accent-violet-1: #f2e9ff; /* Violet 1: lightest tint - backgrounds. */
  --accent-violet-2: #d4b3ff; /* Violet 2: tint - subtle fills and borders. */
  --accent-violet-3: #8944ff; /* Violet 3: base - the family's identity value. */
  --accent-violet-4: #4500ac; /* Violet 4: deep - text and icons on tints. */
  --accent-violet-5: #140042; /* Violet 5: deepest - dark surfaces and high-contrast text. */
  --accent-pink-1: #ffe3fc; /* Pink 1: lightest tint - backgrounds. */
  --accent-pink-2: #ffb2f6; /* Pink 2: tint - subtle fills and borders. */
  --accent-pink-3: #ff39ba; /* Pink 3: base - the family's identity value. */
  --accent-pink-4: #8a0061; /* Pink 4: deep - text and icons on tints. */
  --accent-pink-5: #380037; /* Pink 5: deepest - dark surfaces and high-contrast text. */
  --accent-red-1: #ffe1e1; /* Red 1: lightest tint - backgrounds. */
  --accent-red-2: #ffabab; /* Red 2: tint - subtle fills and borders. */
  --accent-red-3: #ff4b4b; /* Red 3: base - the family's identity value. */
  --accent-red-4: #a31310; /* Red 4: deep - text and icons on tints. */
  --accent-red-5: #560100; /* Red 5: deepest - dark surfaces and high-contrast text. */
  --accent-orange-1: #ffedda; /* Orange 1: lightest tint - backgrounds. */
  --accent-orange-2: #ffd5ab; /* Orange 2: tint - subtle fills and borders. */
  --accent-orange-3: #ff9c1b; /* Orange 3: base - the family's identity value. */
  --accent-orange-4: #ae5100; /* Orange 4: deep - text and icons on tints. */
  --accent-orange-5: #5c2d00; /* Orange 5: deepest - dark surfaces and high-contrast text. */
  --accent-yellow-1: #fff7cc; /* Yellow 1: lightest tint - backgrounds. */
  --accent-yellow-2: #ffed94; /* Yellow 2: tint - subtle fills and borders. */
  --accent-yellow-3: #ffda1e; /* Yellow 3: base - the family's identity value. */
  --accent-yellow-4: #d2a100; /* Yellow 4: deep - text and icons on tints. */
  --accent-yellow-5: #734f00; /* Yellow 5: deepest - dark surfaces and high-contrast text. */
  --accent-lime-1: #f2ffc3; /* Lime 1: lightest tint - backgrounds. */
  --accent-lime-2: #e5ff81; /* Lime 2: tint - subtle fills and borders. */
  --accent-lime-3: #cffd21; /* Lime 3: base - the family's identity value. */
  --accent-lime-4: #89ad00; /* Lime 4: deep - text and icons on tints. */
  --accent-lime-5: #2f5f00; /* Lime 5: deepest - dark surfaces and high-contrast text. */
  --accent-green-1: #d6ffe1; /* Green 1: lightest tint - backgrounds. */
  --accent-green-2: #a6ffbf; /* Green 2: tint - subtle fills and borders. */
  --accent-green-3: #29e474; /* Green 3: base - the family's identity value. */
  --accent-green-4: #00864a; /* Green 4: deep - text and icons on tints. */
  --accent-green-5: #004829; /* Green 5: deepest - dark surfaces and high-contrast text. */
  --surface-base: var(--redrob-white); /* Page background. */
  --surface-raised: var(--gray-1); /* Cards, sheets and menus that sit above the page. */
  --surface-sunken: var(--gray-2); /* Wells, table headers and inset areas. */
  --surface-brand: var(--blue-6); /* Brand-filled areas: primary buttons, brand banners. */
  --surface-brand-subtle: var(--blue-1); /* Quiet brand areas: selected rows, brand callouts. */
  --border-subtle: var(--gray-3); /* Dividers and the border of resting surfaces. Decorative only - use border-strong wherever the edge carries meaning. */
  --border-strong: var(--gray-6); /* Control outlines: inputs, checkboxes, segmented controls. 3.8:1 light, 5.2:1 dark, so boundaries stay visible. */
  --ink-primary: var(--redrob-black); /* Body and heading text on surface-base. 19.7:1 light, 18.7:1 dark. */
  --ink-secondary: var(--gray-7); /* Supporting text and labels on surface-base. 6.3:1 light, 9.0:1 dark. */
  /* NOT var(--gray-6). gray-6 #7c8390 is 3.81:1 on the page, 3.62:1 on layer one and 3.37:1 on layer
     two - below AA for normal text on every light ground in the system, not only the deep one. #686e78
     clears 4.5:1 on all three at 5.13, 4.87 and 4.54. (#696f79 was tried first and missed layer two at
     4.47.) The delivery corrected this in system.css and left a note saying tokens.css is where it
     belongs once tokens.css regenerates; this is that. While the two disagreed, a consumer reading the
     generated native header painted the failing value and a consumer reading both sheets painted the
     passing one - nine points per channel apart, in adjacent pixels, with nothing failing.
     `tools/check/supersession.js` now fails if the two sheets disagree on any token again. */
  --ink-muted: #686e78; /* Placeholders and disabled text. 5.13:1 on the page, 4.87 on layer one, 4.54 on layer two. */
  --ink-brand: var(--blue-7); /* Links and brand text on surface-base. 8.5:1 light, 9.1:1 dark. */
  --ink-on-brand: var(--redrob-white); /* Text and icons on surface-brand. */
  --action-primary: var(--blue-6); /* Resting fill of primary buttons and active controls. White text on it is 5.6:1. */
  --action-primary-hover: var(--blue-7); /* Hover and pressed state of action-primary. */
  --focus-ring: var(--blue-6); /* Focus outline, drawn 2px wide with a 2px offset. */
  --status-success: var(--accent-green-4); /* Success text and icons. */
  --status-warning: var(--accent-orange-4); /* Warning text and icons. */
  --status-danger: var(--accent-red-4); /* Error text, icons and destructive actions. */
  --status-info: var(--accent-sky-4); /* Informational text and icons. */
  --overlay-scrim: rgba(10, 11, 12, 0.55); /* Scrim behind modals and drawers. */
  --surface-material: rgba(255, 255, 255, 0.82); /* Floating surfaces that sit over content - menus, popovers, toasts. Backed by a solid fallback wherever transparency is reduced. */
  --surface-ai: var(--blue-1); /* Ground for generated content and agent surfaces, so machine output is never mistaken for a person's. */
  --border-ai: var(--blue-3); /* Edge of an AI surface. Pairs with surface-ai. */
  --shadow-sm: 0 1px 2px rgba(10, 11, 12, 0.08); /* Resting cards and inputs. */
  --shadow-md: 0 4px 12px rgba(10, 11, 12, 0.10); /* Menus, popovers and hovered cards. */
  --shadow-lg: 0 16px 40px rgba(10, 11, 12, 0.14); /* Modals and dialogs. */
  /* Product colours. Seven products, each a mark (step 6), a 10-step ramp, three themed roles and
     three `beyond` grounds -- 119 declarations, transcribed from the delivery's tokens.json.

     They are here because system.css REFERENCES them and the delivery's own tokens.css never
     declared them: `.rr-shell[data-product="browser"] { --product-wash: var(--product-browser-wash) }`
     named a property nothing declared, so the declaration was invalid and dropped, and every
     AppShell rail lost its product wash on every consumer. An undeclared custom property fails
     silently -- no warning, no build error, and the rail still renders, just without its identity.
     `tools/check/references.js` is what now holds this line. */
  --product-router: #1194dd;
  --product-router-1: #f0f8ff; --product-router-2: #daeeff; --product-router-3: #b3deff; --product-router-4: #7ac6ff; --product-router-5: #37abf5;
  --product-router-6: #1194dd; --product-router-7: #0069a1; --product-router-8: #00527e; --product-router-9: #003c5e; --product-router-10: #00243c;
  --product-router-wash: var(--product-router-1); --product-router-fill: var(--product-router-2); --product-router-line: var(--product-router-3);
  --product-router-beyond-light: linear-gradient(130deg, #37abf5 75%, #b3deff 89%, #f0f8ff 100%); --product-router-beyond-brand: linear-gradient(130deg, #7ac6ff 75%, #37abf5 89%, #1194dd 100%); --product-router-beyond-deep: linear-gradient(130deg, #1194dd 75%, #0069a1 100%);
  --product-chat: #149ca0;
  --product-chat-1: #e9fbfb; --product-chat-2: #ccf4f5; --product-chat-3: #98e8ea; --product-chat-4: #5fd2d6; --product-chat-5: #3db5b9;
  --product-chat-6: #149ca0; --product-chat-7: #007275; --product-chat-8: #00595b; --product-chat-9: #004143; --product-chat-10: #002829;
  --product-chat-wash: var(--product-chat-1); --product-chat-fill: var(--product-chat-2); --product-chat-line: var(--product-chat-3);
  --product-chat-beyond-light: linear-gradient(130deg, #3db5b9 75%, #98e8ea 89%, #e9fbfb 100%); --product-chat-beyond-brand: linear-gradient(130deg, #5fd2d6 75%, #3db5b9 89%, #149ca0 100%); --product-chat-beyond-deep: linear-gradient(130deg, #149ca0 75%, #007275 100%);
  --product-code: #02a252;
  --product-code-1: #e9fded; --product-code-2: #ccf9d6; --product-code-3: #97efaf; --product-code-4: #5ddb87; --product-code-5: #3abe6c;
  --product-code-6: #02a252; --product-code-7: #00783b; --product-code-8: #005d2c; --product-code-9: #00441f; --product-code-10: #002a10;
  --product-code-wash: var(--product-code-1); --product-code-fill: var(--product-code-2); --product-code-line: var(--product-code-3);
  --product-code-beyond-light: linear-gradient(130deg, #3abe6c 75%, #97efaf 89%, #e9fded 100%); --product-code-beyond-brand: linear-gradient(130deg, #5ddb87 75%, #3abe6c 89%, #02a252 100%); --product-code-beyond-deep: linear-gradient(130deg, #02a252 75%, #00783b 100%);
  --product-desk: #d87101;
  --product-desk-1: #fff5ee; --product-desk-2: #ffe6d5; --product-desk-3: #ffcba8; --product-desk-4: #ffa664; --product-desk-5: #eb8227;
  --product-desk-6: #d87101; --product-desk-7: #964d00; --product-desk-8: #763b00; --product-desk-9: #582a00; --product-desk-10: #371800;
  --product-desk-wash: var(--product-desk-1); --product-desk-fill: var(--product-desk-2); --product-desk-line: var(--product-desk-3);
  --product-desk-beyond-light: linear-gradient(130deg, #eb8227 75%, #ffcba8 89%, #fff5ee 100%); --product-desk-beyond-brand: linear-gradient(130deg, #ffa664 75%, #eb8227 89%, #d87101 100%); --product-desk-beyond-deep: linear-gradient(130deg, #d87101 75%, #964d00 100%);
  --product-office: #fe4d3e;
  --product-office-1: #fff4f2; --product-office-2: #ffe4e0; --product-office-3: #ffc8c0; --product-office-4: #ffa193; --product-office-5: #ff6c5b;
  --product-office-6: #fe4d3e; --product-office-7: #b81610; --product-office-8: #950001; --product-office-9: #6f0001; --product-office-10: #470000;
  --product-office-wash: var(--product-office-1); --product-office-fill: var(--product-office-2); --product-office-line: var(--product-office-3);
  --product-office-beyond-light: linear-gradient(130deg, #ff6c5b 75%, #ffc8c0 89%, #fff4f2 100%); --product-office-beyond-brand: linear-gradient(130deg, #ffa193 75%, #ff6c5b 89%, #fe4d3e 100%); --product-office-beyond-deep: linear-gradient(130deg, #fe4d3e 75%, #b81610 100%);
  --product-browser: #f14aa8;
  --product-browser-1: #fff3f8; --product-browser-2: #ffe2ee; --product-browser-3: #ffc4de; --product-browser-4: #ff98ca; --product-browser-5: #ff58b4;
  --product-browser-6: #f14aa8; --product-browser-7: #ad1373; --product-browser-8: #8b005a; --product-browser-9: #680042; --product-browser-10: #420028;
  --product-browser-wash: var(--product-browser-1); --product-browser-fill: var(--product-browser-2); --product-browser-line: var(--product-browser-3);
  --product-browser-beyond-light: linear-gradient(130deg, #ff58b4 75%, #ffc4de 89%, #fff3f8 100%); --product-browser-beyond-brand: linear-gradient(130deg, #ff98ca 75%, #ff58b4 89%, #f14aa8 100%); --product-browser-beyond-deep: linear-gradient(130deg, #f14aa8 75%, #ad1373 100%);
  --product-design: #c162f4;
  --product-design-1: #faf4ff; --product-design-2: #f4e4ff; --product-design-3: #eac9ff; --product-design-4: #dca2ff; --product-design-5: #cd72ff;
  --product-design-6: #c162f4; --product-design-7: #8832b2; --product-design-8: #6e1a94; --product-design-9: #540075; --product-design-10: #35004b;
  --product-design-wash: var(--product-design-1); --product-design-fill: var(--product-design-2); --product-design-line: var(--product-design-3);
  --product-design-beyond-light: linear-gradient(130deg, #cd72ff 75%, #eac9ff 89%, #faf4ff 100%); --product-design-beyond-brand: linear-gradient(130deg, #dca2ff 75%, #cd72ff 89%, #c162f4 100%); --product-design-beyond-deep: linear-gradient(130deg, #c162f4 75%, #8832b2 100%);
}
[data-theme="dark"] {
  --surface-base: var(--redrob-black);
  --surface-raised: var(--gray-9);
  /* NOT #000000. Pure black put layer two 7.51 L* BELOW the page instead of above it, so the dark
     elevation ladder reversed at its second step: a "sunken" well read as a hole punched through the
     document. #1c1f26 makes the two steps +5.28 and +3.47 L* on gray-9 #17181b, against light's +2.10
     and +2.83 in the same perceptual units. Corrected by the delivery in system.css; see --ink-muted. */
  --surface-sunken: #1c1f26;
  --surface-brand: var(--blue-6);
  --surface-brand-subtle: var(--blue-10);
  --border-subtle: var(--gray-8);
  --border-strong: var(--gray-6);
  --ink-primary: var(--gray-1);
  --ink-secondary: var(--gray-5);
  /* NOT var(--gray-6). gray-6 was 4.32:1 on dark layer two; #838a97 clears 4.75. See light --ink-muted. */
  --ink-muted: #838a97;
  --ink-brand: var(--blue-4);
  --ink-on-brand: var(--redrob-white);
  --action-primary: var(--blue-6);
  --action-primary-hover: var(--blue-5);
  --focus-ring: var(--blue-4);
  --status-success: var(--accent-green-3);
  --status-warning: var(--accent-orange-3);
  --status-danger: var(--accent-red-3);
  --status-info: var(--accent-sky-3);
  --overlay-scrim: rgba(0, 0, 0, 0.66);
  --surface-material: rgba(20, 23, 25, 0.86);
  --surface-ai: var(--blue-10);
  --border-ai: var(--blue-8);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.8);
  /* Product roles, dark: the ramp read from the far end -- wash 10, fill 9, line 8. */
  --product-router-wash: var(--product-router-10); --product-router-fill: var(--product-router-9); --product-router-line: var(--product-router-8);
  --product-chat-wash: var(--product-chat-10); --product-chat-fill: var(--product-chat-9); --product-chat-line: var(--product-chat-8);
  --product-code-wash: var(--product-code-10); --product-code-fill: var(--product-code-9); --product-code-line: var(--product-code-8);
  --product-desk-wash: var(--product-desk-10); --product-desk-fill: var(--product-desk-9); --product-desk-line: var(--product-desk-8);
  --product-office-wash: var(--product-office-10); --product-office-fill: var(--product-office-9); --product-office-line: var(--product-office-8);
  --product-browser-wash: var(--product-browser-10); --product-browser-fill: var(--product-browser-9); --product-browser-line: var(--product-browser-8);
  --product-design-wash: var(--product-design-10); --product-design-fill: var(--product-design-9); --product-design-line: var(--product-design-8);
}
:root {
  --space-1: 4px; /* Icon-to-label gap, hairline insets. */
  --space-2: 8px; /* Inside small controls; gap between related items. */
  --space-3: 12px; /* Control padding, list row gaps. */
  --space-4: 16px; /* Card padding, default block gap. */
  --space-5: 20px; /* Padding of larger cards. */
  --space-6: 24px; /* Gap between cards and form groups. */
  --space-8: 32px; /* Gap between subsections. */
  --space-10: 40px; /* Section padding on desktop. */
  --space-12: 48px; /* Gap between page sections. */
  --space-16: 64px; /* Page margins, hero padding. */
  --space-20: 80px; /* Large marketing section rhythm. */
  --radius-xs: 4px; /* Tags, checkboxes, small chips. */
  --radius-sm: 6px; /* Inputs and small buttons. */
  --radius-md: 8px; /* Buttons, menus, default controls. */
  --radius-lg: 12px; /* Cards and panels. */
  --radius-xl: 16px; /* Modals, large cards, media frames. */
  --radius-2xl: 24px; /* Hero blocks and full-bleed color fields. */
  --radius-full: 9999px; /* Pills, avatars and round icon buttons. */
  --gradient-brand: linear-gradient(130deg, #2b52ff 0%, #6ff4f0 100%); /* The main brand gradient. Hero fields, key brand moments. Use the white logo on it. */
  --gradient-deep: linear-gradient(130deg, #507fff 0%, #1733d5 100%); /* The deeper brand gradient, for a filled panel that still has to carry white text. */
  --gradient-light: linear-gradient(130deg, #8aafff 0%, #d9e6ff 55%, #eef4ff 100%); /* The light threshold: brand blue cooling into tint. The default for covers and hero fields. */
  --gradient-tint: linear-gradient(130deg, #d9e6ff 0%, #f8f9fb 100%); /* Quiet tint gradient for backgrounds behind dark text. */
  --wash-brand: linear-gradient(130deg, #2b52ff1f 0%, #6ff4f014 46%, #ffffff00 100%); /* Soft brand wash for hero and marketing surfaces. Low intensity by design - if it reads as a colored panel, it is too strong. */
  --wash-quiet: linear-gradient(130deg, #2b52ff0f 0%, #bad2ff0a 60%, #ffffff00 100%); /* The quietest wash, for cards, stat tiles and empty states inside the product. */
  --wash-deep: linear-gradient(130deg, #2b52ff24 0%, #6ff4f00f 55%, #ffffff00 100%); /* The same wash carried onto a dark surface, where a paler one would disappear. */
  --wash-edge: linear-gradient(180deg, #2b52ff00 0%, #2b52ff14 100%); /* A one-directional fade for the foot of a section or the top of a sticky bar. */
  --duration-instant: 80ms; /* Hover and active feedback on a control. */
  --duration-fast: 140ms; /* Default for state changes: color, border, opacity. */
  --duration-base: 220ms; /* Entrances and exits of small surfaces - menus, tooltips, toasts. */
  --duration-slow: 320ms; /* Large surfaces: drawers, modals, expanding panels. */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* Default. Leaves quickly, settles softly. */
  --easing-entrance: cubic-bezier(0.05, 0.7, 0.1, 1); /* Something arriving: menus, drawers, toasts. */
  --easing-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* Something leaving. Faster than its entrance. */
  --easing-settle: cubic-bezier(0.34, 1.4, 0.64, 1); /* A small overshoot for a control that snaps - switch, checkbox, stepper marker. */
  --control-height-sm: 32px; /* Small controls: buttons, inputs, selects. */
  --control-height-md: 40px; /* Default control height. */
  --control-height-lg: 48px; /* Large controls, primary actions on marketing pages. */
  --control-radius: 8px; /* Buttons, menus and other controls. Matches radius-md. */
  --field-radius: 6px; /* Inputs, selects and textareas. Matches radius-sm. */
  --card-padding: 20px; /* Inside a card body. */
  --card-radius: 12px; /* Cards, panels and table containers. */
  --table-cell-y: 16px; /* Vertical padding of a table cell. */
  --section-gap: 24px; /* Gap between blocks inside a panel. */
  --focus-ring-width: 2px; /* Focus outline width, with the same value as its offset. */
  --tick-angle: 40deg; /* The rake of the brand's own mark, reused for the tick that marks a meta line and a section. */
  --card-radius-feature: 24px; /* The one card in a view that carries weight. Its top-left corner stays square - the gateway notch. */
  --font-sans: Pretendard, 'Wanted Sans', 'Noto Sans Devanagari', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-serif: Newsreader, 'Nanum Myeongjo', Georgia, 'Times New Roman', serif;
  --font-serif-display: 'Newsreader Display', Newsreader, 'Nanum Myeongjo', Georgia, serif; /* Newsreader at optical size 52, for voice-1 (64px) and voice-2 (40px). 23px and below keeps the text cut. */
  --font-sans-kr: 'Wanted Sans', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-serif-kr: 'Nanum Myeongjo', 'Apple Myungjo', Batang, serif;
  --font-sans-hi: 'Noto Sans Devanagari', Pretendard, 'Nirmala UI', sans-serif; /* Hindi-first surfaces. Pretendard follows for Latin in a mixed line; Nirmala UI is the Windows fallback. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display-1: 800 72px/72px var(--font-sans); /* Hero headline. ExtraBold, one or two lines. */
  --text-display-2: 800 52px/56px var(--font-sans); /* Section opener on marketing pages. */
  --text-title-1: 700 36px/42px var(--font-sans); /* Page title. Bold. */
  --text-title-2: 700 27px/34px var(--font-sans); /* Major section heading. */
  --text-title-3: 600 21px/28px var(--font-sans); /* Subsection heading. SemiBold. */
  --text-title-4: 600 17px/24px var(--font-sans); /* Card and dialog title. */
  --text-body-lg: 400 17px/28px var(--font-sans); /* Lead paragraph and long-form reading. */
  --text-body: 400 15px/24px var(--font-sans); /* Default body text. */
  --text-body-strong: 500 15px/24px var(--font-sans); /* Emphasis inside body copy. Medium. */
  --text-body-sm: 400 13px/20px var(--font-sans); /* Dense tables, secondary descriptions. */
  --text-body-light: 300 15px/24px var(--font-sans); /* Light weight body, for large quiet blocks of Latin text. There is no Korean equivalent - Wanted Sans starts at 400, so a quiet Korean block gets there by color and leading instead. */
  --text-label: 600 13px/18px var(--font-sans); /* Form labels, buttons and tabs. SemiBold. */
  --text-caption: 400 11px/16px var(--font-sans); /* Captions, helper text and metadata. */
  --text-meta: 500 12px/18px var(--font-sans); /* The line above a title that says what a thing is: Pretendard at 12px medium in ink-secondary, sentence case, no extra tracking. Never uppercase and never a second typeface. */
  --text-numeric: 500 14px/20px var(--font-sans); /* Figures in a column - table cells, ids, durations. Pretendard with font-variant-numeric: tabular-nums, so digits align without a monospace face. */
  --text-voice-1: 400 64px/66px var(--font-serif); /* The statement. One sentence, alone on the surface. Never more than two lines. */
  --text-voice-2: 400 40px/48px var(--font-serif); /* Section opener and the line that carries an argument into a slide. */
  --text-voice-quote: italic 400 23px/34px var(--font-serif); /* Pull quote inside running text. Italic, no quotation marks, attribution in label. */
  --text-voice-lede: 400 19px/31px var(--font-serif); /* The one serif paragraph that follows a statement. Never used for a second paragraph. */
  --text-kr-display-1: 800 69px/82px var(--font-sans-kr); /* Korean hero. 96% of display-1 - Hangul sits taller than Latin caps at the same size. */
  --text-kr-title-1: 700 35px/50px var(--font-sans-kr); /* Korean page title. 96% of title-1, line height one step longer. */
  --text-kr-title-3: 600 20px/32px var(--font-sans-kr); /* Korean subsection heading. */
  --text-kr-body: 400 14px/26px var(--font-sans-kr); /* Korean body. 96% of body, line height 26px against Latin's 24px. */
  --text-kr-label: 500 13px/20px var(--font-sans-kr); /* Korean label and meta line. Never tracked open, never all-caps. */
  --text-kr-voice-1: 400 56px/74px var(--font-serif-kr); /* Korean statement. 88% of voice-1 - Myeongjo Hangul runs large on the body. */
  --text-kr-voice-2: 400 35px/52px var(--font-serif-kr); /* Korean section opener. 88% of voice-2, the Myeongjo counterpart. */
  --text-kr-quote: 400 21px/36px var(--font-serif-kr); /* Korean pull quote. Nanum Myeongjo has no italic; set Regular and indent instead. */
  --text-kr-voice-lede: 400 18px/32px var(--font-serif-kr); /* The one Korean serif paragraph under a statement. Never a second. */
  --text-code: 400 13px/20px var(--font-mono); /* Actual code and machine payloads only - a tool name, a JSON body. Nothing else in the system uses the mono face. */
}
.display-1 {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 72px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.display-2 {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.title-1 {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.title-2 {
  font-family: var(--font-sans);
  font-size: 27px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.title-3 {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.title-4 {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.003em;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.003em;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.003em;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-light {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: -0.003em;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.meta {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.numeric {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.voice-1 {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 66px;
  font-weight: 400;
  letter-spacing: -0.022em;
}
.voice-2 {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.voice-quote {
  font-family: var(--font-serif);
  font-size: 23px;
  line-height: 34px;
  font-weight: 400;
  letter-spacing: -0.004em;
  font-style: italic;
}
/* `.voice-quote` is the only utility class in this file that asks for italic, and Devanagari has no
   italic cut - so a browser SYNTHESISES one by slanting the upright glyphs, which `37-devanagari.md`
   forbids outright: "Never a slanted substitute." `system.css` already guards the component form
   (`:lang(hi) .rr-voice-quote`) and the `em`/`i` elements; this utility class was the one path that
   still reached a slant, confirmed in a browser before the guard existed. Emphasis goes to weight 600,
   the same substitution the spec prescribes for `em` under `:lang(hi)`. */
:lang(hi) .voice-quote,
[lang='hi'] .voice-quote {
  font-style: normal;
  font-weight: 600;
}
.voice-lede {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 31px;
  font-weight: 400;
  letter-spacing: -0.002em;
}
.kr-display-1 {
  font-family: var(--font-sans-kr);
  font-size: 69px;
  line-height: 82px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.kr-title-1 {
  font-family: var(--font-sans-kr);
  font-size: 35px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.kr-title-3 {
  font-family: var(--font-sans-kr);
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.006em;
}
.kr-body {
  font-family: var(--font-sans-kr);
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.kr-label {
  font-family: var(--font-sans-kr);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.kr-voice-1 {
  font-family: var(--font-serif-kr);
  font-size: 56px;
  line-height: 74px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.kr-voice-2 {
  font-family: var(--font-serif-kr);
  font-size: 35px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -0.006em;
}
.kr-quote {
  font-family: var(--font-serif-kr);
  font-size: 21px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: 0;
}
.kr-voice-lede {
  font-family: var(--font-serif-kr);
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("../fonts/WantedSans-Variable.woff2") format("woff2");
  font-weight: 400 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nanum Myeongjo";
  src: url("../fonts/NanumMyeongjo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nanum Myeongjo";
  src: url("../fonts/NanumMyeongjo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Devanagari and Newsreader Display shipped in `fonts/` with no @font-face rule anywhere -
   not here, and not in the delivery's own bundle either. A font file with no rule is unreachable: the
   family name still resolves against whatever the reader happens to have installed locally, so a
   machine with Nirmala UI looked correct and a machine without it fell through to a system face, and
   the 121 KB in the package was never loaded on either.

   Hindi is the sharper half of that. `system.css` already carries every Hindi rule - the voice scale,
   upright emphasis, word-break, the rake fallback - and one of them, `.rr-rake:lang(hi)`, reads
   `var(--font-sans-hi)` with NO fallback value. An undeclared custom property there makes the whole
   `font-family` declaration invalid at computed-value time, so a Hindi hero inherited its font instead
   of taking the one the system chose for it.

   Both rules and both stacks are transcribed from `30-typography.md`, which names `--font-sans-hi` and
   `--font-serif-display` and gives their fallback order; the sizes match the faces the spec measured
   (Devanagari variable 100-900 at 118 KB, Newsreader Display at optical size 52 and 30 KB). Nothing
   here is chosen by us. */
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../fonts/NotoSansDevanagari-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Display";
  src: url("../fonts/Newsreader-Display.woff2") format("woff2");
  /* The display cut is 400 upright only - there is no italic and no other weight in the file. */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}