/* Generated by scripts/sync-design-system.py. Do not edit by hand.
   Source: Vaitkus EdTech design system (https://claude.ai/artifact/MjkYG3mH3QAiTWBUQ1cm1w)
   Design system synced from: claude/exciting-brahmagupta-n194m9@5b6dbac on 2026-10-11 */
:root, [data-theme="light"] {
  --surface: #f8f9fa; /* Page background and the 15px side frame of the homepage (theme.css body). Dark value from the CV page. */
  --canvas: #eef0f2; /* Background behind a paper sheet, as on the CV page. */
  --paper: #fafafa; /* Cards, sheets, the CV page body, learning blocks. */
  --surface-sunk: #f4f5f7; /* Side columns and inset panels (CV aside), quiz options at rest. */
  --ink: #2a2a2a; /* Body text and headings on surface, paper, surface-sunk and canvas. 13:1 or better in both themes. */
  --ink-muted: #5b6168; /* Meta lines, captions, stat labels on paper and surface-sunk. 6.4:1 light, 7:1 dark. */
  --line: #dde0e4; /* Hairline dividers, card borders, progress track. */
  --brand-red: #c80000; /* The only red. Fills (highlight bars, site mark, category tags, info box hover), 3px rules, underlines, icons, focus ring and numbers 24px+. 4.2:1 on surface and paper light, 3.9:1 on paper dark: never use it for text under 24px. */
  --on-brand: #fafafa; /* Text on brand-red and slab fills. 4.2:1 on brand-red: highlight bars carry headings 24px+ only, where 3:1 is the floor. 18:1 on slab. */
  --accent-soft: #fbeaea; /* Pale tint of brand-red behind the organisations rail, selected quiz options and reflection prompts. */
  --slab: #dfdfdf; /* Second half of the site mark, dark highlight bars, compact buttons. Pair with on-brand text (18:1). */
  --nav-dark: #bababa; /* Fixed bottom navbar background on the homepage. */
  --success: #28a745; /* The Hire me button fill (btn-success), kept exact from the source. Text on it is on-success. */
  --on-success: #0e111638; /* Label on success fills (Hire me button). 6.3:1 on success in both themes. */
  --success-ink: #28a745; /* Intentional addition for learning feedback: Correct labels and completed states as text on paper. 5.3:1 light, 8.9:1 dark. Always paired with a word and icon. */
  --danger: #ff9900; /* Error fills and icons, orange so it never competes with brand-red. 2.1:1 on paper: never as text; pair with an ink word such as Error. */
  --highlight: #00cdffcc; /* Focus outline on controls that sit over photos and video (video pause toggle). */
  --overlay: #147fffb8; /* Round control background over media; 0.92 alpha on hover. */
  --focus-ring: var(--brand-red); /* Keyboard focus: 3px solid outline, 2px offset, on every interactive element over page surfaces. */
  --shadow-text-on-image: 0 1px 8px rgba(0, 0, 0, 0.55); /* text-shadow for descriptions laid over project card images. */
}
[data-theme="dark"] {
  --surface: #0e1116;
  --canvas: #111315;
  --paper: #1a1d20;
  --surface-sunk: #0e1116;
  --ink: #eceef0;
  --ink-muted: #a3a9b0;
  --line: #2f3439;
  --brand-red: #ff7070;
  --on-brand: #0e1116;
  --accent-soft: #0e1116;
  --slab: #0a0a0a;
  --nav-dark: #0e1116;
  --success: #1e7b34;
  --on-success: #0a0a0a;
  --success-ink: #1e7b34;
  --danger: #ff9900;
  --highlight: #148bd8d2;
  --overlay: rgba(14, 17, 22, 0.72);
  --focus-ring: var(--brand-red);
  --shadow-text-on-image: 0 1px 8px #1d00008c;
}
:root {
  --space-5: 5px; /* Gap between adjacent buttons, tight icon gaps (helper margin-5). */
  --space-10: 10px; /* Paragraph spacing on dense pages, button stacks. */
  --space-15: 15px; /* Homepage side frame, grid gutters, icon to heading. */
  --space-20: 20px; /* Heading bottom margin, mobile page padding. */
  --space-30: 30px; /* Lead paragraph margins, card padding on desktop. */
  --space-40: 40px; /* Gap under a section heading block, main column padding. */
  --space-50: 50px; /* Gap under info boxes. */
  --space-70: 70px; /* Bottom padding of the page body, clears the fixed bottom navbar. */
  --radius-0: 0; /* Default. Highlight bars, site mark, cards, project tiles, quiz blocks. */
  --radius-sm: 0px; /* Compact buttons on the CV page, code blocks, inputs. */
  --radius-btn: 0px; /* Large homepage buttons (btn-rounded-4x). */
  --radius-pill: 50px; /* Small buttons on project cards, status chips (btn-rounded-5x). */
  --radius-round: 50%; /* Info box icon discs, the media pause toggle. */
  --page-max: 1080px; /* Max width of the CV sheet and dense content. */
  --text-max: 700px; /* Max width of lead paragraphs (max-width-700). */
  --bp-mobile: 820px; /* CV and learning layouts stack into one column below this. */
  --bp-nav: 992px; /* Top navigation collapses into the side panel below this. */
  --tap-min: 44px; /* Minimum size of any tap target. */
  --font-display: Oswald, "Arial Narrow", sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --text-hero: 330 46px/1.15 var(--font-display); /* Masthead name on the CV page. 34px under 820px. */
  --text-h1: 500 42px/1.3 var(--font-display); /* Page and hero headings. Uppercase. */
  --text-h2: 600 36px/1.3 var(--font-display); /* Section headings, the heading-title. Uppercase. */
  --text-h3: 700 31px/1.3 var(--font-display); /* Info box and sub-section headings. Uppercase. */
  --text-h4: 600 26px/1.3 var(--font-display); /* Card titles. Uppercase. */
  --text-h5: 600 22px/1.3 var(--font-display); /* Small headings. Uppercase. */
  --text-h6: 600 19px/1.3 var(--font-display); /* Smallest heading. Uppercase. */
  --text-section-title: 500 20px/1.15 var(--font-display); /* CV section titles in ink, with a 2px brand-red line underneath. */
  --text-stat-number: 600 34px/1 var(--font-display); /* Numbers in a stat strip, in brand-red, tabular figures. */
  --text-eyebrow: 500 15px/1.2 var(--font-display); /* Uppercase kicker above a title, in ink with a brand-red square in front. */
  --text-lead: 330 21px/1.6 var(--font-body); /* Intro paragraph under a section heading. */
  --text-body: 400 18px/1.6 var(--font-body); /* Homepage paragraphs. */
  --text-body-compact: 400 15px/1.6 var(--font-body); /* Dense pages: CV, learning blocks, cards. */
  --text-small: 400 14px/1.6 var(--font-body); /* Side columns, button labels on the CV, hints. */
  --text-meta: 400 13px/1.6 var(--font-body); /* Dates, sources, figcaptions, in ink-muted. */
  --text-label: 400 12px/1.4 var(--font-body); /* Uppercase stat labels in ink-muted. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --surface: #0e1116;
  --canvas: #111315;
  --paper: #1a1d20;
  --surface-sunk: #0e1116;
  --ink: #eceef0;
  --ink-muted: #a3a9b0;
  --line: #2f3439;
  --brand-red: #ff7070;
  --on-brand: #0e1116;
  --accent-soft: #0e1116;
  --slab: #0a0a0a;
  --nav-dark: #0e1116;
  --success: #1e7b34;
  --on-success: #0a0a0a;
  --success-ink: #1e7b34;
  --danger: #ff9900;
  --highlight: #148bd8d2;
  --overlay: rgba(14, 17, 22, 0.72);
  --focus-ring: var(--brand-red);
  --shadow-text-on-image: 0 1px 8px #1d00008c;
  }
}