style(qa3): design-token foundation + safe polish/a11y fixes

- Add :root design tokens in _typography.css (was empty) — brand teal/orange,
  ink/text greys, radius + type scale + section rhythm. Visually neutral;
  new rules can reference var()s instead of scattered literals.
- a11y: visible :focus-visible ring on header nav + dropdown links (keyboard
  users had none).
- Fix synthesized faux-bold: .route-report h1 800 -> 700 (Inter loads 400-700).
- Testimonials column: overflow-y scroll -> auto (no permanent scrollbar gutter).
- Lightbox image radius 6px -> 8px (matches the site rounding scale).
- Consistent card affordance: homepage .news-card now lifts on hover like the
  news-hub / blog cards.
- Re-stamped cache-bust (v=1f64b22f).

Deferred (needs a brand decision): unifying the two primary oranges
(#FA7850 vs #F2762E) and the fuller literal->token migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/base/_typography.css

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   Design tokens
+   --------------------------------------------------------------------------
+   Single source of truth for values previously hard-coded as literals across
+   the stylesheets (e.g. #2D738C ~98×, #101828 ~103×). New/refactored rules
+   should reference these instead of raw hex. Values match the existing
+   dominant usages, so introducing this file is visually neutral — migrating
+   older literals to var() can happen incrementally.
+   ========================================================================== */
+:root {
+  /* Brand — teal */
+  --teal:        #2D738C;
+  --teal-600:    #255E73;   /* button hover */
+  --teal-800:    #153C4E;   /* deep accents */
+
+  /* Brand — orange.  NOTE: the site currently ships two primary oranges:
+     --orange (event pages / logo family) and --orange-cta (homepage buttons).
+     They read as slightly different brands side by side; unify on one once the
+     canonical value is confirmed. */
+  --orange:      #F2762E;
+  --orange-600:  #E85D2A;
+  --orange-cta:  #FA7850;
+  --orange-text: #B4531A;   /* AA-safe orange for text on white */
+
+  /* Ink / text */
+  --ink:         #101828;
+  --text:        #344054;
+  --muted:       #475467;
+  --muted-2:     #667085;   /* smallest muted text that still meets AA on white */
+
+  /* Surfaces / lines */
+  --bg:          #F9FAFB;
+  --line:        #EAECF0;
+  --line-2:      #E4E7EC;
+
+  /* Radius scale */
+  --r-sm:  8px;
+  --r-md:  12px;
+  --r-lg:  16px;
+  --r-pill: 999px;
+
+  /* Type scale (available for future heading normalisation) */
+  --fs-h1: 60px;
+  --fs-h2: 36px;
+  --fs-h3: 22px;
+  --fs-body: 16px;
+
+  /* Section vertical rhythm */
+  --space-section: 112px;
+}

css/components/_cards.css

@@ -30,6 +30,10 @@
 .news-card .card-content {
     color: #FFFFFF;
 }
+/* Match the hover lift used by news-hub / blog cards for a consistent
+   "this is clickable" cue. */
+.news-card-media { transition: transform 0.18s ease, box-shadow 0.18s ease; }
+.news-card:hover .news-card-media { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(9, 18, 26, 0.34); }
 
 .news-card .author {
     font-size: 14px;

css/components/_lightbox.css

@@ -40,7 +40,7 @@
 .lightbox.is-open { display: flex; }
 .lightbox-img {
     max-width: 92vw; max-height: 82vh; object-fit: contain;
-    border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     user-select: none; -webkit-user-drag: none;
 }
 .lightbox-close, .lightbox-prev, .lightbox-next {

css/layout/_header.css

@@ -95,6 +95,12 @@
 .navigation > .menu-item > a:hover {
     color: #101828;
 }
+.navigation > .menu-item > a:focus-visible {
+    outline: 2px solid var(--teal);
+    outline-offset: 3px;
+    border-radius: 4px;
+    color: #101828;
+}
 
 /* Poudarjanje aktivne strani na namizju */
 .navigation .menu-item.active-page > a {
@@ -237,9 +243,11 @@
     white-space: nowrap;
 }
 
-.dropdown-menu a:hover {
+.dropdown-menu a:hover,
+.dropdown-menu a:focus-visible {
     background-color: #F9FAFB;
     color: #2D738C;
+    outline: none;
 }
 
 .mobile-menu-icon, .mobile-nav-panel {

css/main.css

@@ -15,36 +15,36 @@
  */
 
 /* 1. Base Styles */
-@import 'base/_base.css?v=6770822f';
-@import 'base/_typography.css?v=6770822f';
+@import 'base/_base.css?v=1f64b22f';
+@import 'base/_typography.css?v=1f64b22f';
 
 /* 2. Layout Components */
-@import 'layout/_header.css?v=6770822f';
-@import 'layout/_footer.css?v=6770822f';
+@import 'layout/_header.css?v=1f64b22f';
+@import 'layout/_footer.css?v=1f64b22f';
 
 /* 3. Reusable Components */
-@import 'components/_buttons.css?v=6770822f';
-@import 'components/_cards.css?v=6770822f';
-@import 'components/_lang-banner.css?v=6770822f';
-@import 'components/_lightbox.css?v=6770822f';
+@import 'components/_buttons.css?v=1f64b22f';
+@import 'components/_cards.css?v=1f64b22f';
+@import 'components/_lang-banner.css?v=1f64b22f';
+@import 'components/_lightbox.css?v=1f64b22f';
 
 /* 4. Page-specific Styles */
-@import 'pages/_home.css?v=6770822f';
-@import 'pages/_projects.css?v=6770822f';
-@import 'pages/_article.css?v=6770822f';
-@import 'pages/_about.css?v=6770822f';
-@import 'pages/_timeline.css?v=6770822f';
-@import 'pages/_guide.css?v=6770822f';
-@import 'pages/_faq.css?v=6770822f';
-@import 'pages/_blog.css?v=6770822f';
-@import 'pages/_news.css?v=6770822f';
-@import 'pages/_member.css?v=6770822f';
-@import 'pages/_support.css?v=6770822f';
-@import 'pages/_hub.css?v=6770822f';
-@import 'pages/_legal.css?v=6770822f';
-@import 'pages/_gallery.css?v=6770822f';
-@import 'pages/_press.css?v=6770822f';
-@import 'pages/_event.css?v=6770822f';
+@import 'pages/_home.css?v=1f64b22f';
+@import 'pages/_projects.css?v=1f64b22f';
+@import 'pages/_article.css?v=1f64b22f';
+@import 'pages/_about.css?v=1f64b22f';
+@import 'pages/_timeline.css?v=1f64b22f';
+@import 'pages/_guide.css?v=1f64b22f';
+@import 'pages/_faq.css?v=1f64b22f';
+@import 'pages/_blog.css?v=1f64b22f';
+@import 'pages/_news.css?v=1f64b22f';
+@import 'pages/_member.css?v=1f64b22f';
+@import 'pages/_support.css?v=1f64b22f';
+@import 'pages/_hub.css?v=1f64b22f';
+@import 'pages/_legal.css?v=1f64b22f';
+@import 'pages/_gallery.css?v=1f64b22f';
+@import 'pages/_press.css?v=1f64b22f';
+@import 'pages/_event.css?v=1f64b22f';
 
 /* Loaded last so the shared filter bar wins over per-page chip styles. */
-@import 'pages/_filterbar.css?v=6770822f';
+@import 'pages/_filterbar.css?v=1f64b22f';

css/pages/_guide.css

@@ -937,7 +937,7 @@
     border-bottom: 2px solid #F2F4F7;
 }
 .route-report-logo { height: 46px; width: auto; }
-.route-report h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #101828; }
+.route-report h1 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: #101828; } /* 700: Inter loads 400-700; 800 was synthesized */
 .route-report-date { margin: 6px 0 0; font-size: 13px; color: #667085; }
 .route-report-intro { color: #475467; line-height: 25px; margin: 0 0 8px; }
 .route-report h2 { font-size: 17px; color: #101828; margin: 24px 0 10px; }

css/pages/_home.css

@@ -437,7 +437,7 @@
     gap: 24px;
     width: 846px;
     height: 800px;
-    overflow-y: scroll;
+    overflow-y: auto; /* was scroll — no permanent scrollbar gutter when content fits */
     padding-right: 15px;
 }
 .testimonials-columns::-webkit-scrollbar {