/* ============================================================
   keyquest.tech · KQ-01 — shared foundation
   The 11 locked color tokens, the paper sweep (the site's only
   gradient), and the two site-wide shadows. Every page includes
   this file; no color anywhere may fall outside this block.
   ============================================================ */

:root{
  /* -- the 11 locked colors -- */
  --paper:#F2F0EB;        /* page bg — warm studio sweep */
  --card:#FFFFFF;         /* projector / case-study pages, index */
  --body-face:#E7E4DE;    /* device face flat fill */
  --body-step:#D9D6CF;    /* value-step: extrusion edge, recesses, keys, photo placeholders */
  --ink:#1A1918;          /* primary text */
  --grey-1:#55534F;       /* secondary text, engraved labels */
  --grey-2:#8F8D88;       /* captions, hints, corner furniture — large/short text only */
  --hair:rgba(26,25,24,0.15);   /* ALL borders/dividers/engraved lines, 1px */
  --accent:#E8501F;       /* Braun orange — GRAPHIC ONLY, never at text size */
  --accent-text:#B93A10;  /* orange at text size: links, meta lines */
  --screen:#17171A;       /* device screen bg */
  --screen-text:#EAE8E4;  /* text on screen */
  --screen-hi:#FF6A33;    /* on-screen selection bar / highlights */

  /* alpha-composition bases — same colors as above, for derived tints:
     rgba(var(--ink-rgb),.35) etc. Nothing outside the palette. */
  --ink-rgb:26,25,24;
  --screen-text-rgb:234,232,228;

  /* chamfer engraving (hairline at 0.10–0.12 alpha) */
  --hair-chamfer:rgba(26,25,24,0.10);
  --hair-recess:rgba(26,25,24,0.12);

  /* the site's only gradient: the paper vignette */
  --paper-sweep:radial-gradient(115% 85% at 50% 32%, #F7F5F0 0%, #F2F0EB 50%, #E8E5DE 100%);

  /* the two site-wide shadows.
     Device shadow is split: the flat step rides the shell, the soft
     drop lives on its own element so tilt can parallax it (D8 §4). */
  --shadow-device-step:0 7px 0 var(--body-step);
  --shadow-device-drop:0 34px 44px -18px rgba(26,25,24,0.3);
  --shadow-sheet:0 18px 50px -20px rgba(26,25,24,0.35);

  /* scanline textures (values verbatim from the wireframe source) */
  --scanlines-photo:repeating-linear-gradient(0deg, rgba(26,25,24,0.05) 0, rgba(26,25,24,0.05) 1px, transparent 1px, transparent 4px);
}

/* -- reset & base type ---------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  /* no native tap overlay: with document-level click delegation Android
     paints it over whole containers; our own press states give feedback */
  -webkit-tap-highlight-color:transparent;
}

body{
  margin:0;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}

img{display:block;max-width:100%;height:auto}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.02em}

a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}

button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:pointer}

/* readouts & counters */
.tnum{font-variant-numeric:tabular-nums}

/* screen-reader-only content */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* keyboard focus must always be visible (a11y — not decoration) */
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* cross-page morph where the browser supports it; hard nav otherwise.
   Fast — the default 250ms crossfade makes navigation feel slow. */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.15s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}

/* reduced motion: static variants everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}