/* ZSINÓRMÉRTÉK° — shared DESIGN SYSTEM.
 * Single source of truth for tokens + core components across every NON-index surface
 * (legal pages now, payment/checkout pages later). Values are copied verbatim from the
 * main site's inline <style> in public/index.html — keep them in sync if the site changes.
 *
 * index.html keeps its own inline design (byte-stable original); this file mirrors it so
 * standalone pages and future checkout UI look identical without duplicating one-off CSS.
 */

/* ---- tokens ---- */
:root{
  --ink:#0E2438;      --ink-rgb:14,36,56;
  --ink2:#2E4A64;     --ink2-rgb:46,74,100;
  --paper:#F4F6FA;    --paper-rgb:244,246,250;
  --paper2:#FFFFFF;
  --ink-paper:#E9F0F8; --ink-paper-rgb:233,240,248;
  --grid:#DCE6F1;     --grid-rgb:220,230,241;
  --line:#AEC2D6;
  --ink-line:#28445F; --ink-line-rgb:40,68,95;
  --blueprint:#1E62B8; --bp-rgb:30,98,184;
  --blue-bright:#3D86D6;
  --redline:#D83A2A;  --rl-rgb:216,58,42;
  --redline-dark:#B22C1E;
  --chalk:#E5412C;
  --copper:#B0722E;   --copper-rgb:176,114,46;
  --ok:#1C7A4D;

  --fd:'Archivo',system-ui,sans-serif;
  --fb:'Newsreader',Georgia,serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1200px; --pad:26px;
  --sh1:5px 5px 0 rgba(var(--bp-rgb),.13);
  --sh2:8px 8px 0 rgba(var(--ink-rgb),.11);
  --shr:6px 6px 0 rgba(var(--rl-rgb),.20);
  --shi:7px 7px 0 rgba(var(--ink-rgb),.16);
}

/* ---- reset ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
::selection{background:var(--chalk);color:#fff}

/* ---- bilingual toggling ---- */
body[data-lang="hu"] .en{display:none}
body[data-lang="en"] .hu{display:none}

/* ---- type helpers ---- */
.eyebrow{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:11px;margin-bottom:20px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--redline)}
.mono{font-family:var(--fm);font-size:12.5px;letter-spacing:.04em}

/* ---- buttons (verbatim from the site) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fd);font-weight:600;font-size:1rem;letter-spacing:-.005em;padding:15px 28px;min-height:52px;border:2px solid var(--ink);cursor:pointer;text-decoration:none;transition:transform .16s cubic-bezier(.34,1.4,.5,1),box-shadow .16s;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--redline)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--redline)}
.btn:active{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--redline)}
.btn-red{background:var(--redline);border-color:var(--redline-dark);box-shadow:5px 5px 0 var(--ink)}
.btn-red:hover{box-shadow:7px 7px 0 var(--ink)}.btn-red:active{box-shadow:3px 3px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:5px 5px 0 rgba(var(--bp-rgb),.22)}
.btn-ghost:hover{background:var(--ink);color:#fff;box-shadow:7px 7px 0 rgba(var(--bp-rgb),.22)}
.btn-inv{background:transparent;color:var(--ink-paper);border-color:var(--ink-paper);box-shadow:5px 5px 0 var(--redline)}
.btn-inv:hover{background:var(--ink-paper);color:var(--ink)}
a.txtlink{color:var(--blueprint);text-decoration:none;font-weight:600;border-bottom:2px solid var(--line);transition:border-color .15s}
a.txtlink:hover{border-color:var(--blueprint)}
:focus-visible{outline:3px solid var(--redline);outline-offset:3px}

/* ---- language segmented control (verbatim) ---- */
.lang{display:inline-flex;border:1.5px solid var(--ink);font-family:var(--fm);font-size:12px;font-weight:500;overflow:hidden}
.lang button{font-family:inherit;font-size:inherit;padding:7px 11px;background:transparent;color:var(--ink2);border:none;cursor:pointer;letter-spacing:.06em;min-height:34px}
.lang button.act{background:var(--ink);color:#fff}

/* ---- reusable drafting surfaces ---- */
.ds-card{background:var(--paper2);border:2px solid var(--ink);box-shadow:var(--sh1)}
.ds-note{border-left:3px solid var(--redline);background:rgba(var(--rl-rgb),.06);padding:12px 0 12px 18px}
.ds-seal{font-family:var(--fm);font-size:11px;letter-spacing:.12em;font-weight:500;color:var(--redline);border:2px solid var(--redline);padding:6px 12px;background:var(--paper2)}
/* status markers used on pre-publish pages */
.ds-todo{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:#fff;background:var(--copper);padding:2px 8px;border-radius:2px;vertical-align:middle}
.ds-confirm{color:var(--redline-dark);font-weight:600}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}