/* =========================================================================
   tokens.css · Furkan Dag · Initiativbewerbung sematicon AG (Vertrieb)
   Colours and type of the pages around the start page (CV, notice, 404, cover letter), in the
   sematicon look (logo and design of sematicon are used for this application). Values from the
   fact sheet docs/sematicon/FAKTENBLATT-2026-10-28.md, section 6 (kit tokens of sematicon.eu):

     brand       red #CF191C (action, mark) · blue #1F3C87 (sparingly) · dark #07071A (stage and text)
                 white #FFFFFF · light grey #F7F7F7 (cards)
     hero        radial-gradient(rgb(0 46 119) 0%, rgb(0 34 103) 68%, rgb(7 7 26) 100%) with a crimson glow
     shapes      pills 100px, cards 24px, no shadows, no border lines
     never       #D10D24, #002781 and any green: these appeared in embedded flag and icon graphics,
                 they are not brand colours

   Contrast (WCAG): red on white 5,5:1 and on #F7F7F7 5,1:1 · blue on white 10,2:1 · text #55587A on #F7F7F7
   6,4:1 · white on red 5,5:1 · #B6BBD2 on #07071A 10,5:1 · #9CA2BD on #07071A 7,9:1
   ========================================================================= */
:root {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fw-light: 300;
  --fw-reg: 400;
  --fw-semi: 600;
  --fw-bold: 700;

  /* stage around the sheet */
  --bg: #07071A;
  --ink: #FFFFFF;
  --muted: #B6BBD2;
  --dim: #9CA2BD;
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-dark-2: rgba(255, 255, 255, 0.3);

  --red: #CF191C;
  --red-hover: #A81316;
  --blue: #1F3C87;

  /* sheet (light, so the CV prints well) */
  --paper: #FFFFFF;
  --paper-2: #F7F7F7;
  --tx-1: #07071A;
  --tx-2: #2F3250;
  --tx-3: #55587A;
  --line: #E4E5EC;

  --hint: #7A5200;
  --hint-bg: #FFF3D6;

  --r-pill: 100px;
  --r-card: 24px;
  --r-kpi: 16px;
  --r-sheet: 24px;
  /* head of the CV and the letter: the hero of sematicon.eu with the crimson glow at the lower right */
  --grad-head: radial-gradient(75% 150% at 100% 100%, rgba(170, 3, 31, 0.62), transparent 62%), radial-gradient(rgb(0 46 119) 0%, rgb(0 34 103) 68%, rgb(7 7 26) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-weight: var(--fw-reg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
b, strong { font-weight: var(--fw-bold); }
h1, h2, h3 { font-weight: var(--fw-bold); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }