/* =========================================================================
   tokens.css · Furkan Dag · Initiativbewerbung EGYM SE
   Colours and type of the secondary pages (CV, notice, 404, cover letter).
   The approved start page (index.html) keeps its own inline tokens; these
   values are taken from it: near-black stage, warm white text, one orange.

   DARK (page around the sheet, same as the start page)
     --bg #0a0a0b · --ink #f3f2ef · --muted #a4a5ab (8:1) · --dim #85868c (5,4:1)
     --orange-hi #FF8F3D (accent on dark, 8,7:1) · --orange-ui #C0530A (surface for white text, 4,7:1)
   PAPER (the sheet: light, so the CV prints well)
     --paper #FFFFFF · --paper-2 #F3F3F1 · --tx-1 #141416 · --tx-2 #3D3E43 · --tx-3 #5C5D63 (6,6:1)
     --accent-ink #A84300 (orange text on paper, 6:1 on white, 5,5:1 on --paper-2)
     --line #E3E3E0 · --line-strong #C9C9C5
   ========================================================================= */
:root {
  --font: 'Inter Static', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --fw-reg: 400;
  --fw-med: 500;

  --bg: #0a0a0b;
  --bg-2: #141517;
  --ink: #f3f2ef;
  --ink-2: #d9d9dc;
  --muted: #a4a5ab;
  --dim: #85868c;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-dark-2: rgba(255, 255, 255, 0.2);
  --orange: #D15B05;
  --orange-ui: #C0530A;
  --orange-hi: #FF8F3D;

  --paper: #FFFFFF;
  --paper-2: #F3F3F1;
  --tx-1: #141416;
  --tx-2: #3D3E43;
  --tx-3: #5C5D63;
  --accent-ink: #A84300;
  --line: #E3E3E0;
  --line-strong: #C9C9C5;

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

  --r-pill: 999px;
  --r-md: 18px;
  --r-sm: 12px;
  --sh-sheet: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* head of the CV and the letter: the stage of the start page with its warm motor light */
  --grad-head: radial-gradient(60% 120% at 92% 0%, rgba(255, 143, 61, 0.22), transparent 60%), linear-gradient(180deg, #17181b 0%, #0a0a0b 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-med); }
h1, h2, h3 { font-weight: var(--fw-med); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }