/* ===========================================================================
   Design tokens — the whole visual system lives here.
   Scoped to .pv2 so nothing can reach the original portfolio at /index.html.
   =========================================================================== */
.pv2 {
  /* --- Color ------------------------------------------------------------ */
  --bg:            #ffffff;
  --text:          #0a0a0a;
  --text-muted:    #6e6e6e;
  --text-faint:    #9a9a9a;
  --border:        #e7e7e7;
  --border-strong: #d4d4d4;
  --surface:       #fafafa;   /* inside media frames, behind letterboxed media */
  --dot:           #d4d4d4;
  --dot-active:    #0a0a0a;

  /* --- Type — DM Sans, restrained weights ------------------------------- */
  --font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fs-xs:    0.75rem;    /* 12px — media labels, counters */
  --fs-sm:    0.8125rem;  /* 13px — metadata, links */
  --fs-base:  0.9375rem;  /* 15px — body */
  --fs-lg:    1.0625rem;  /* 17px — project titles */
  --fs-xl:    1.5rem;     /* 24px — viewer project name */
  --fs-name:  clamp(24px, 2.1vw, 34px);   /* identity — confident, not billboard */
  --fs-year:  clamp(22px, 1.9vw, 31px);
  --fs-nav:   clamp(15px, 1.15vw, 19px);  /* upper-right links */
  --lh-tight: 1.2;
  --lh-body:  1.6;

  /* --- Page margin system (0A §A, §J) ----------------------------------- */
  --page-inline: clamp(20px, 5.5vw, 96px);
  --page-top:    clamp(28px, 7vh, 84px);
  --project-gap: clamp(64px, 10vw, 180px);
  /* Height of the header block (identity vs the five-link column, whichever is
     taller). The timelines clear it so frames never collide with the links. */
  --header-h:    clamp(150px, 18vh, 200px);

  /* --- Spacing ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Radii ------------------------------------------------------------ */
  --radius-media:   clamp(40px, 4vw, 56px);  /* 51px @1280, 56px @1440+, 40px floor */
  --radius-control: 8px;

  /* --- Frame sizing (V5 §2) — smaller, so neighbouring work stays visible */
  --frame-w-landscape: clamp(260px, 49vw, 820px);   /* ~46–52vw, max ~820px */
  --frame-h-phone:     clamp(300px, 53vh, 620px);   /* ~48–58vh            */
  --frame-h-square:    clamp(240px, 44vh, 500px);   /* 1:1, weight nearer Kada */
  --frame-h-auto:      clamp(240px, 52vh, 560px);   /* cap for aspect-adaptive frames */

  /* --- Motion ----------------------------------------------------------- */
  --motion-fast:   140ms;  /* hover, icon feedback */
  --motion-ui:     220ms;  /* control + state transitions */

  /* Spatial transitions. Every one of these is transform-driven; opacity is
     never the exit cue, which is what produced the grey wash before. */
  --duration-project-open:  380ms;   /* shared-element expand */
  --duration-project-close: 320ms;   /* shared-element collapse back to source */
  --duration-drag-cancel:   220ms;
  --duration-drag-complete: 180ms;   /* gesture throw — a different interaction */
  --duration-ui-reveal:     240ms;   /* internal UI only, never the surface */
  --about-duration:         320ms;   /* About enter */
  --about-exit:             300ms;   /* About leave */
  --duration-ui-exit:       130ms;
  --delay-meta:             120ms;
  --delay-controls:         180ms;

  --ease-fluid:    cubic-bezier(0.22, 1, 0.36, 1);   /* default deceleration */
  --about-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fast-out: cubic-bezier(0.16, 1, 0.3, 1);    /* micro-transitions */

  /* Video controls must clear the ~50–55px rounded corner. The geometric
     minimum for a corner-anchored control at radius r is 0.293r (~16px at
     56px); these leave margin on top of that. */
  --video-safe-x: clamp(20px, 2.2vw, 32px);
  --video-safe-y: clamp(20px, 2.2vw, 32px);

  --dot-size: 8px;

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring: 2px solid var(--text);
  --focus-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pv2 {
    --motion-fast: 1ms;
    --motion-ui: 1ms;
    --duration-project-open: 1ms;
    --duration-project-close: 1ms;
    --duration-drag-cancel: 1ms;
    --duration-drag-complete: 1ms;
    --duration-ui-reveal: 1ms;
    --about-duration: 1ms;
    --about-exit: 1ms;
    --duration-ui-exit: 1ms;
    --delay-meta: 0ms;
    --delay-controls: 0ms;
  }
}