/* ============================================================
   STOCKED DESIGN TOKENS - single source of truth.
   After this file, no page hardcodes type, color, space,
   radius, shadow, or motion. Apple-language: near-black on
   white, one gray ramp, one accent used sparingly.
   ============================================================ */
:root {
  /* ---- type: one display face, one body face, 5 sizes ---- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  --text-xs:   13px;   /* captions, labels           */
  --text-sm:   15px;   /* secondary, table body      */
  --text-md:   17px;   /* body                       */
  --text-lg:   28px;   /* section heads, card titles */
  --text-xl:   clamp(40px, 4.5vw, 56px); /* display  */
  --leading-display: 1.1;
  --leading-body:    1.5;
  --tracking-display: -0.015em;  /* tight on large    */
  --tracking-body:     0em;      /* normal on body    */
  --weight-display: 600;
  --weight-body:    400;
  --weight-medium:  500;

  /* ---- color: near-black, one 5-step gray ramp, one accent ---- */
  --ink:      #1D1D1F;   /* text on white            */
  --gray-1:   #6E6E73;   /* secondary text           */
  --gray-2:   #86868B;   /* tertiary, captions       */
  --gray-3:   #D2D2D7;   /* hairlines, borders       */
  --gray-4:   #F5F5F7;   /* washes, wells            */
  --gray-5:   #FBFBFD;   /* raised surface tint      */
  --surface:  #FFFFFF;
  --accent:   #2F55E5;   /* brand blue - links, one CTA, active states ONLY */
  --ok:       #1D7A46;   /* semantic only, never decorative */
  --warn:     #9A6B00;
  --bad:      #C93A2E;

  /* ---- spacing: 8px base ---- */
  --s-1:  8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5:  48px; --s-6: 64px;  --s-7: 96px;  --s-8: 160px;
  --section-y-desktop: var(--s-7);   /* 96-160px  */
  --section-y-mobile:  var(--s-6);   /* 64-80px   */
  --content-max: 1120px;
  --measure: 68ch;                   /* 65-75 chars */

  /* ---- radii: exactly two ---- */
  --radius-sm: 10px;   /* controls, chips, inputs   */
  --radius-lg: 20px;   /* cards, panels, images     */

  /* ---- shadows: exactly two, both subtle ---- */
  --shadow-sm: 0 1px 2px rgba(29,29,31,.06);
  --shadow-lg: 0 2px 8px rgba(29,29,31,.05), 0 20px 48px rgba(29,29,31,.08);

  /* ---- motion: one recipe ---- */
  --motion-duration: 350ms;
  --motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ease-out */
  --motion-rise: 8px;
}

/* the single scroll-in recipe */
.rev { opacity: 0; transform: translateY(var(--motion-rise));
       transition: opacity var(--motion-duration) var(--motion-ease),
                   transform var(--motion-duration) var(--motion-ease); }
.rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
}

/* focus visibility - global */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }